Jquery-ui保存可拖動項目的位置

Question

我想保留可拖動項目的x和y位置的var停止。 感謝一些小提琴和話題我這樣做：

$("#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()); 
    } 
}); 

我只是想救我每次移動項目和在其他JavaScript函數使用它的位置。

這裏是fiddle.js：

http://jsfiddle.net/oe0fg84b/

Answer 1

正如@約翰所提到的，它看起來像你已經存儲了可拖動圖像的X和Y座標中的元素#source_x和#source_y，分別。

您應該能夠訪問他們在其他功能如下：

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

只是一個觀察，你的助手財產克隆似乎導致圖像重置它被拖後的位置。我懷疑這是覆蓋你的座標值，每次重置爲0,0。嘗試：

$("#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()); 
    } 
}); 

我已經修改了你的例子後得到在按鈕點擊座標：http://jsfiddle.net/Jason_Graham/oe0fg84b/2/

Answer 2

嘗試使用下面的代碼。如果我弄明白了，可能這就是解決方案。

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()]; 
    } 
});