jQuery拖拽元素随机位置跳转问题求助

我在使用jQuery UI的draggable和droppable组件时，遇到拖拽元素放下后随机跳至页面任意位置的问题。

设置了多个可放置区域（.grid-item）和可拖拽元素（.draggable），初始拖拽脚本：

$('.draggable-box').draggable();

放置操作的脚本：

$('.draggable').draggable({
    stop(e, ui) {
      
    },
});

$('.grid-item').droppable({
    accept: '.draggable',
    drop(e, ui) {
        ui.draggable.appendTo(this);
    },
});

拖拽元素会随机跳转，我尝试过以下方案但均无效：

1. 在stop回调里强制设置left:0, top:0，导致元素固定在一处，修改top/left也无效果；
2. 计算容器宽度调整位置，但依旧出现随机跳转问题。

期望效果：拖拽元素移至目标容器后，保持放下时的位置不跳转。

这个问题的核心是：当你把拖拽元素appendTo到目标容器时，元素的定位基准从原来的父容器变成了新的.grid-item，但jQuery UI的draggable是基于原始父容器计算left/top的，直接移动DOM会导致定位混乱。

正确的做法是在drop回调里，先计算元素相对于目标容器的偏移，再重新设置定位，同时处理draggable的内置状态：

$('.draggable').draggable({
    // 拖拽时显示克隆元素，避免DOM移动导致的位置计算偏差
    helper: 'clone',
    // 拖拽到非可放置区域时返回原位（可选）
    revert: 'invalid'
});

$('.grid-item').droppable({
    accept: '.draggable',
    drop(e, ui) {
        const draggedElement = ui.draggable;
        // 计算元素相对于目标容器的偏移量
        const targetOffset = $(this).offset();
        const dragOffset = ui.offset;
        const relativeLeft = dragOffset.left - targetOffset.left;
        const relativeTop = dragOffset.top - targetOffset.top;
        
        // 移动元素到目标容器并重置定位
        draggedElement.appendTo(this)
            .css({
                position: 'absolute',
                left: relativeLeft,
                top: relativeTop
            })
            // 销毁旧的draggable实例，重新初始化保证后续拖拽正常
            .draggable('destroy')
            .draggable();
    }
});

关键注意点： #

• 确保.grid-item设置了position: relative，这样拖拽元素的absolute定位才会以它为基准：

.grid-item {
    position: relative;
}

• 使用helper: 'clone'可以避免拖拽过程中DOM移动导致的位置计算错误；
• 销毁并重新初始化draggable，是因为移动DOM后原组件的定位缓存会失效，保证后续拖拽操作正常。

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