要素を任意の場所にドラッグ＆ドロップできますか？

Question

私は2つの問題、

を持っているが、私は一度REDのdivにドロップのdiv要素を動かすことができるが、私は、素材コードを台無しに位置を再度しようとした場合

1. 、コードのシオマネキのリンクを参照してください。

2. 私は位置X/Yを保存したい& divのIDをRED Divに移動SAVEボタンをクリックします。

ありがとうございます。このような Code Fiddler

$(".draggable").draggable({ cursor: "crosshair", revert: "invalid"}); 
$("#drop").droppable({ accept: ".draggable", 
      drop: function(event, ui) { 
        console.log("drop"); 
        $(this).removeClass("border").removeClass("over"); 
      var dropped = ui.draggable; 
      var droppedOn = $(this); 
      $(dropped).detach().css({}).appendTo(droppedOn);  
       }, 
      over: function(event, elem) { 
        $(this).addClass("over"); 
        console.log("over"); 
      } 
       , 
        out: function(event, elem) { 
        $(this).removeClass("over"); 
        } 
        }); 
$("#drop").sortable(); 

$("#origin").droppable({ accept: ".draggable", drop: function(event, ui) { 
        console.log("drop"); 
        $(this).removeClass("border").removeClass("over"); 
      var dropped = ui.draggable; 
      var droppedOn = $(this); 
      $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);  


       }}); 
$(".save").click(function() { 
    getCordinates(); 
}); 
function getCordinates(){ 
    var c = document.getElementById("drop").children.length; 
    alert(c); 
} 

Answer 1

最初のポイント私はあなたがあなたのdiv（#originまたは#drop）のイベント降下のIDを取得することができ、それを複製する第二の点に係ることができませんでした：

$(ui.draggable).attr("id") 

imgのXとYの位置が落とされた場合、次のように取得できます：

//position X 
$(ui.draggable).offset().left 
//Position Y 
$(ui.draggable).offset().top