jQuery Sortable子项拖拽update事件重复触发问题求助

当使用connectWith关联多个可排序容器时，拖拽子元素从一个容器移动到另一个容器时，两个容器都会触发update事件：

• 原容器因元素被移除触发一次
• 目标容器因元素被添加触发一次
  这就是alert弹出两次的核心原因。stopPropagation()和preventDefault()无法解决该问题，因为这是jQuery UI Sortable的设计逻辑，并非事件冒泡导致。

以下两种常用方式可解决该问题，按需选择：

方法一：通过ui.sender判断触发容器 #

ui.sender指向元素被拖拽出的原容器，若当前容器是目标容器，ui.sender会返回undefined。我们可以只在目标容器触发时执行代码：

$(".group-items").sortable({
    containment: "document",
    items: ".group-item",
    placeholder: "item-placeholder",
    connectWith: '.group-items',
    update: function(event, ui) {
        // 仅在目标容器触发时执行操作
        if (!ui.sender) {
            alert('ok');
        }
    }
});

方法二：改用stop事件替代update #

stop事件在拖拽操作完全结束时仅触发一次，不管元素是否在不同容器间移动：

$(".group-items").sortable({
    containment: "document",
    items: ".group-item",
    placeholder: "item-placeholder",
    connectWith: '.group-items',
    stop: function(event, ui) {
        alert('ok');
    }
});

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