jQuery UI拖拽元素无法定位到指定精确坐标的问题求助

咱们先拆解一下你遇到的问题：拖拽.item到#inventory后，明明设置了top:50px和left:50px，但元素却跑到左上角（0,0）。我之前也踩过类似的坑，主要是几个点没处理好，咱们一步步来修复：

首先，你的代码有个明显的语法错误 #

看你写的droppable配置，直接在配置对象里写$(this).doSomething();和$(ui.draggable).doSomething();是非法的——配置对象里只能放键值对（回调函数或配置项），不能直接执行代码。这会导致JavaScript报错，droppable可能根本没正确初始化，这是第一个要修复的点。

核心问题：元素位置的参考系与jQuery UI的默认行为冲突 #

1. revert: true的副作用：如果没有在放置成功时取消回退，元素会触发回退动画，看起来像是“跑到左上角”，其实是在回到原始位置的过程中被你append到了新容器，导致位置错乱。
2. append的时机不对：你先设置了元素的top/left，再把它append到#inventory——此时元素的父元素从原来的容器变成了#inventory（relative定位），原来设置的top/left是相对于文档的，append后就变成了相对于#inventory的，位置自然不对。

修正后的完整代码 #

可拖拽元素（.item）的代码 #

$('.item').draggable({ 
    // 改成函数式的revert，只有没放到有效容器时才回退
    revert: function(droppable) {
        return !droppable;
    },
    cursor: 'pointer', 
    drag: function(event, ui){ 
        var pos = ui.offset; 
        console.log('X: ' + pos.left + ' ' + 'Y: ' + pos.top); 
    } 
});

可放置元素（#inventory）的代码 #

$('#inventory').droppable({ 
    drop: function(event, ui){ 
        var item = ui.draggable;
        
        // 第一步：取消回退行为，确保元素留在放置区域
        item.draggable("option", "revert", false);
        
        console.log("dropped"); 
        
        // 第二步：先把元素从原父元素移除，再添加到inventory
        // 这样后续设置的top/left会直接相对于inventory计算
        item.detach().appendTo($(this));
        
        // 第三步：设置绝对定位到你想要的精准坐标
        item.css({
            position: 'absolute',
            top: '50px',
            left: '50px',
            // 重置margin，避免默认样式干扰位置
            margin: 0
        });
    } 
});

额外说明 #

如果你想让元素精准定位到鼠标放下的位置（而不是固定的50px），可以通过计算鼠标相对于#inventory的位置来设置：

drop: function(event, ui){ 
    var inventory = $(this);
    var item = ui.draggable;
    
    item.draggable("option", "revert", false);
    
    // 计算鼠标相对于inventory的坐标
    var inventoryOffset = inventory.offset();
    var relativeTop = ui.offset.top - inventoryOffset.top;
    var relativeLeft = ui.offset.left - inventoryOffset.left;
    
    item.detach().appendTo(inventory);
    item.css({
        position: 'absolute',
        top: relativeTop + 'px',
        left: relativeLeft + 'px',
        margin: 0
    });
}

这样调整后，元素就能精准停留在你指定的位置了～

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