將元素拖放到任何位置？

Question

我有兩個問題，

請參閱提琴手鏈接以獲取代碼，

1. 一旦放入RED div中，我就能夠移動div元素，但是如果我嘗試重新定位，元素代碼就會混亂。

2. 我要保存位置X / Y和div的ID，保存到SAVE按鈕上的RED Div。單擊。

提前致謝。 提琴手

$(".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