使用jQuery Sortable时onDrop事件致页面冻结问题求助

我之前也踩过这个坑！你碰到的问题根源在于自定义onDrop事件时没有让库完成默认的收尾流程，导致拖动元素一直卡在拖动状态（透明悬浮、页面无响应）。

问题原因 #

jQuery Sortable（非jQuery UI那个）的onDrop事件设计比较特殊：如果你自己写了这个回调函数，就必须手动触发库的默认drop处理逻辑。如果不做这件事，库就不会重置拖动元素的样式和状态，元素会一直保持拖动时的position: absolute和半透明效果，页面也会因为拖动状态没结束而出现冻结感。

解决方案 #

在你的onDrop函数里，要么调用传入的_super参数（这是库内置的默认drop处理函数），要么返回true，让库继续完成后续操作。

举个修改后的代码例子：

$('ol').sortable({
  group: 'nested',
  // 正确的onDrop写法
  onDrop: function(item, container, _super) {
    // 这里放你的自定义逻辑，比如打印日志
    console.log('元素已放置:', item.text().trim());
    
    // 关键：调用_super执行库的默认drop处理
    _super(item, container);
    
    // 或者也可以返回true来允许默认流程执行
    // return true;
  }
});

额外注意事项 #

• 别把这个库和jQuery UI Sortable搞混，两者的API完全不一样，这个库的事件回调需要遵循它自己的规则
• 尽量使用最新版本的jQuery Sortable，旧版本可能存在类似的兼容性问题
• 如果还是有问题，检查一下页面里有没有其他JS代码阻止了drop事件的冒泡，比如其他事件监听器调用了event.preventDefault()或者event.stopPropagation()

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