jQuery拖拽元素至目标区域位置异常，如何修正TOP/LEFT初始值？

问题分析 #

你遇到的问题核心原因及隐藏错误：

• jQuery UI Draggable 默认给拖拽元素添加绝对定位，并基于原父容器设置top/left值。将元素移到新容器后，这些坐标仍以旧父容器为参考，导致元素出现在新容器外部。
• 直接设置left:0, top:0会强制元素固定在新容器左上角，丢失拖拽释放时的目标位置，体验糟糕。
• 代码存在选择器错误：$("droppable")缺少标识符（ID选择器需加#，类选择器需加.），会导致droppable事件无法正确绑定。

解决方案 #

我们需要在元素放入新容器时，重新计算它相对于新容器的偏移量，设置对应top/left值，同时确保新容器为相对定位，让元素的绝对定位以新容器为参考系。

修正后的完整代码：

$(document).ready(function () {
    $("#addBtn").click(function () {
        var $div = $("<div>", { 
            "class": "alert alert-info draggable alwaysTop", 
            text: "Say-Da-Tay!" 
        }).draggable();

        $("#dropbox").prepend($div);
    });

    // 修正选择器，此处假设目标容器使用ID标识
    $("#droppable").droppable({
        accept: ".draggable", 
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = $(this);
            
            // 计算拖拽元素相对于目标容器的偏移量
            var containerOffset = droppedOn.offset();
            var elemOffset = dropped.offset();
            var relativeTop = elemOffset.top - containerOffset.top;
            var relativeLeft = elemOffset.left - containerOffset.left;
            
            // 移动元素到新容器并设置对应位置
            $(dropped).detach()
                      .css({
                          top: relativeTop + "px",
                          left: relativeLeft + "px"
                      })
                      .appendTo(droppedOn);
        }
    });
});

必要样式补充 #

确保目标容器（Final Destination box）设置相对定位，让元素的绝对定位基于容器而非页面：

#droppable {
    position: relative;
    /* 其他自定义样式：宽度、高度、边框等 */
}

方案生效逻辑 #

1. 通过offset()获取目标容器和拖拽元素的页面绝对坐标，计算出元素相对于新容器的相对偏移量。
2. 将该偏移量设为元素的top/left值，让元素在新容器内的位置与拖拽释放时的视觉位置完全匹配。
3. 目标容器设为相对定位，确保元素的绝对定位参考系切换为新容器。

内容的提问来源于stack exchange，提问作者Andrew