Question

我有两个问题，

参考fiddler链接获取代码，

我能够在RED div中移动div元素，但如果我尝试重新定位元素代码会搞砸。
我想保存位置X / Y＆amp; 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

拖放元素到任何位置？

1 个答案: