javascript - 将元素拖放到任何位置？

Question

我有两个问题，

1. 一旦 div 元素放入 RED div 中，我就可以移动它，但如果我尝试重新定位元素，代码就会出错。

2. 我想保存位置 X/Y 和 div 的 ID，在单击“保存”按钮时移至红色 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);
}

代码的 Fiddler 链接:Code Fiddler

Answer 1

第一点我无法复制它，关于第二点你可以在你的div(#origin或#drop)的事件下降中获得id像这样:

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

并且img的X和Y Position已经被dropped了你可以这样获取:

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