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

@ジョンで述べたように、あなたはすでに、それぞれ、#source_xと#source_y要素にドラッグ可能な画像のx、y座標を格納しているように、それが見えます。

あなたは次のように別の関数でそれらにアクセスできるようにする必要があります

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

だけ観察、あなたのヘルパープロパティクローンは、それがドラッグされた後の位置だリセットするために画像を引き起こしているようです。私はこれがあなたの座標値をオーバーライドしていると思われ、毎回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()]; 
    } 
});