Jquery-ui Position des ziehbaren Elements speichern

Question

Ich möchte die var der X- und Y-Position des ziehbaren Elements auf Stopp beibehalten. Dank zu einem gewissen Geige und das Thema ich dies tat:

$("#image").draggable({ 
     helper: 'clone', 
    stop:function(event,ui) { 
     var wrapper = $("#wrapper").offset(); 
     var borderLeft = parseInt($("#wrapper").css("border-left-width"),10); 
     var borderTop = parseInt($("#wrapper").css("border-top-width"),10); 
     var pos = ui.helper.offset(); 
     $("#source_x").val(pos.left - wrapper.left - borderLeft); 
     $("#source_y").val(pos.top - wrapper.top - borderTop); 
     alert($("#source_x").val() + "," + $("#source_y").val()); 
    } 
}); 

Ich möchte nur die Position jedes Mal, wenn ich das Element bewegen speichern und es in einer anderen JavaScript-Funktion verwenden. Hier

ist die fiddle.js:

http://jsfiddle.net/oe0fg84b/

Answer 1

Wie @John erwähnt, sieht es aus wie Sie bereits die x- und y-Koordinaten des ziehbar Bildspeicherelemente #source_x und #source_y sind.

sollten Sie in der Lage sein, sie in einer anderen Funktion für den Zugriff auf wie folgt:

var x =$("#source_x").val(); 
var y = $("#source_y").val(); 

Nur eine Beobachtung, Ihre Helfer Eigenschaft Klon scheint das Bild zu verursachen seine Position zurückgesetzt, nachdem gezogen wird. Ich vermute, das überschreibt dann Ihre Koordinatenwerte und wird jedes Mal auf 0,0 zurückgesetzt. Versuchen:

$("#image").draggable({ 
stop:function(event,ui) { 
    var wrapper = $("#wrapper").offset(); 
    var borderLeft = parseInt($("#wrapper").css("border-left-width"),10); 
    var borderTop = parseInt($("#wrapper").css("border-top-width"),10); 
    var pos = ui.helper.offset(); 
    $("#source_x").val(pos.left - wrapper.left - borderLeft); 
    $("#source_y").val(pos.top - wrapper.top - borderTop); 
    alert($("#source_x").val() + "," + $("#source_y").val()); 
    } 
}); 

ich dein Beispiel geändert habe später, um die Koordinaten auf Tastenklick zu erhalten: http://jsfiddle.net/Jason_Graham/oe0fg84b/2/

Answer 2

Versuchen Sie, die folgenden Code. Wenn ich dich richtig verstanden habe, kann das wahrscheinlich die Lösung sein.

var moved_times_index = 0; 
var postionssaved_object = {}; 
$("#image").draggable({ 
     helper: 'clone', 
    stop:function(event,ui) { 
     var wrapper = $("#wrapper").offset(); 
     var borderLeft = parseInt($("#wrapper").css("border-left-width"),10); 
     var borderTop = parseInt($("#wrapper").css("border-top-width"),10); 
     var pos = ui.helper.offset(); 
     $("#source_x").val(pos.left - wrapper.left - borderLeft); 
     $("#source_y").val(pos.top - wrapper.top - borderTop); 
     alert($("#source_x").val() + "," + $("#source_y").val()); 
     moved_times_index++; 
     postionssaved_object[moved_times_index] = [$("#source_x").val(), $("#source_y").val()]; 
    } 
});