jQuery sortable搭配draggable无法获取正确事件目标id的问题

问题根因 #

你当前遇到的目标id获取偏差，本质是jQuery UI Sortable的事件触发逻辑特性导致的：

• 从字段类型区直接拖拽新控件到目标容器时，拖拽流程的事件绑定落点就是你绑定sortable的目标容器，因此可以正常拿到正确的容器id。
• 当两个div容器已经在主容器内，再拖拽其中一个div去嵌套到另一个div的childcontainer时，跨同关联sortable列表移动元素的过程中，stop事件的event.target会绑定到元素被拖离的原父级sortable容器，而非元素最终放置的目标容器，这就是你拿到错误id的核心原因。
  本质上stop事件会在被拖离的源容器和放置的目标容器上各触发一次，你之前在stop里取到的id，其实是元素出发的原容器id。

修正实现 #

不要依赖stop事件的event属性获取放置目标，改用sortable内置的专属回调识别最终落点，调整后的代码逻辑如下：

$('.containerHolder').sortable({
    connectWith: '.containerHolder',
    scroll: false,
    revert: true,
    zIndex: 10000,
    helper: "clone",
    placeholder: "control-placeholder",
    // 跨容器放置时触发，识别真正承接元素的目标容器
    receive: function(event, ui) {
        // event.currentTarget 为最终承接元素的容器，不受源容器干扰
        const targetContainerId = event.currentTarget.id;
        // ui.sender 为元素拖拽出发的源容器，可按需做逻辑判断
        const sourceContainerId = ui.sender[0].id;
        alert(targetContainerId);
    },
    // 同容器内拖拽排序时触发
    update: function(event, ui) {
        // 同容器内部排序时 ui.sender 为空，可区分跨容器/同容器操作场景
        if(!ui.sender) {
            const currentOperateContainerId = event.currentTarget.id;
        }
    }
});
$("#fieldTypes li").draggable({
    connectToSortable: ".containerHolder",
    helper: "clone",
    revert: "invalid",
});
$(".containerHolder").disableSelection();

避坑提醒 #

• 给每一层嵌套的childcontainer单独配置独立的sortable实例，不要只给外层容器绑定逻辑就忽略内层，否则拖拽到内层容器时会因为事件冒泡触发外层sortable的判定，进一步干扰目标识别。
• 上述receive回调对从字段区直接拖入新控件的场景同样生效，不会出现原有正常场景的逻辑兼容问题，两种拖拽路径都能准确获取目标容器id。

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