将元素拖放到任何位置？答案

【问题标题】：drag and drop element to any location?将元素拖放到任何位置？
【发布时间】：2022-02-14 18:48:46
【问题描述】：

我有两个问题，

一旦放入 RED div 中，我就可以移动 div 元素，但如果我尝试重新定位元素，代码就会混乱。
我想保存位置 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);
}

代码的 Fiddler 链接：Code Fiddler

【问题讨论】：

你说“你尝试重新定位元素”是什么意思？
@JoseRojas 如果你看到，当你在 RED Div 中拖动元素时，位置不是鼠标指向的位置。我想将元素放置在鼠标指向的位置。
你说的我没发生过，元素总是有光标位置

标签： javascript jquery html css

【解决方案1】：

第一点我无法复制，关于第二点，您可以在 div 的事件 drop 中获取 id（#origin 或 #drop），如下所示：

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

并且img的X和Y位置已经被丢弃了，你可以这样获取：

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

【讨论】：