如何仅检测SortableJS拖放事件并禁止DOM修改与元素克隆

核心约束说明 #

• 交互目标：仅检测从卡片列表拖放条目到指定超链接的动作，获取被拖条目的关联业务数据
• 强制要求：拖拽全流程禁止任何DOM结构修改、禁止元素克隆操作

具体配置调整项 #

源容器（卡片列表）配置调整 #

• 移除group配置中的revertClone: true项：该参数为克隆拖放逻辑设计，会强制触发拖拽结束时的元素克隆DOM操作，不符合无克隆要求
• 修改group.pull配置值：将原有pull: true替换为自定义返回固定值的函数pull: () => false，从Sortable内置逻辑层面切断元素被拉出源容器、插入其他容器的链路，从根源阻止DOM移动操作
• 保留原有sort: false、forceFallback: true、ghostClass: 'dragging'、animation: 200配置：这些设置仅控制源容器内排序逻辑禁用、拖拽占位视觉样式、拖拽动画效果，不会修改真实业务元素的DOM
• 简化onStart钩子逻辑：移除createDropSortable()、observer.observe(...)相关代码，因为目标容器的Sortable实例可在页面初始化时提前创建，且配置层面已阻断DOM修改，无需额外用DOM观察器做拦截
• 可在onStart钩子里直接记录被拖拽元素的基础数据，供后续拖放检测时使用

调整后的源容器配置参考：

new Sortable(cardsContainer, {
    animation: 200,
    ghostClass: 'dragging',
    sort: false,
    forceFallback: true,
    group: {
        name: 'shared',
        // 自定义pull逻辑：禁止元素被拉出源容器加入其他容器DOM
        pull: () => false
        // 已移除所有clone、revertClone相关配置
    },
    onStart: function (evt) {
        // 仅记录被拖拽元素的关联数据，不做任何DOM操作
        this.currentDragData = evt.item.dataset
    }
})

目标容器（指定超链接/drop-box）配置调整 #

• 修改group.put配置值：新增put: () => false逻辑，从目标容器层面彻底拒绝任何元素被插入自身DOM，从根源阻断跨容器DOM变更
• 移除冗余的filter: '.drop-box'配置：该参数用于过滤不可拖拽的元素，在已完全禁止DOM插入的场景下无实际作用
• 替换原有onAdd钩子逻辑：onAdd仅在元素真正被插入目标容器时触发，由于已配置禁止元素插入，该钩子不会触发。改用Sortable原生拖拽生命周期钩子做拖放检测：
  • 用onDragOver钩子实现拖拽元素悬停到目标超链接时的视觉反馈
  • 用onDrop钩子实现拖拽在目标超链接上释放时的动作检测，直接从钩子参数中读取被拖拽元素的业务数据
• 保留原有ghostClass: "dropping"、animation: 200、sort: false配置：这些设置仅控制悬停视觉样式、动画效果，不会修改真实DOM

调整后的目标容器配置参考：

// 页面初始化时直接遍历所有目标超链接创建Sortable实例，无需等拖拽开始再创建
document.querySelectorAll('.drop-box').forEach(dropBox => {
    new Sortable(dropBox, {
        group: {
            name: 'shared',
            // 目标容器拒绝任何元素插入自身DOM
            put: () => false
        },
        ghostClass: "dropping",
        animation: 200,
        sort: false,
        // 拖拽悬停到目标时的逻辑，仅做视觉反馈
        onDragOver: function(evt) {
            // 可在此处补充悬停样式控制逻辑
        },
        // 拖拽在目标上释放时的检测逻辑
        onDrop: function(evt) {
            // 直接读取被拖拽元素的业务数据，不做任何DOM修改
            const draggedData = evt.originalSource.dataset
            // 传入自定义业务流程即可
        }
    })
})

方案有效性说明 #

• DOM变更阻断逻辑：Sortable内置的DOM移动操作，必须同时满足“源容器允许pull出元素、目标容器允许put接收元素”两个条件才会触发。通过双向配置禁止pull/put后，Sortable从底层逻辑就不会执行appendChild、insertBefore这类DOM修改操作，完全无需额外的观察器拦截
• 克隆操作阻断逻辑：Sortable所有元素克隆相关逻辑，都仅在pull: 'clone'、revertClone开启时才会触发，移除上述配置后，拖拽过程中不会生成任何新的DOM克隆节点
• 事件检测不受影响：Sortable的全流程拖拽生命周期事件（拖拽开始、悬停目标、释放、拖拽结束）的触发逻辑完全独立于DOM移动操作，只要两个容器归属于同一个group，即使完全禁止跨容器元素移动，所有拖拽事件都会正常触发，完全满足拖放动作检测的需求

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