jQuery UI拖拽时为悬停可放置元素添加事件监听优化

你的思路完全正确——只在拖拽过程中临时启用当前悬停的droppable元素，但原代码存在两个关键问题：一是在drag事件（拖拽过程中持续触发）里重复给所有will-be-drop绑定hover事件，导致大量重复事件绑定，反而加剧卡顿；二是hover是全局事件，不管有没有拖拽都会触发，不符合"仅拖拽状态下悬停才生效"的需求。

下面是兼顾性能和功能的优化方案：

核心思路 #

1. 提前初始化所有droppable但默认禁用：只做一次DOM初始化操作，避免重复绑定事件，减少初始性能开销。
2. 拖拽过程中临时启用悬停元素：在拖拽开始时，通过事件委托（或精准绑定）给will-be-drop添加临时的鼠标进出事件，仅启用当前悬停的元素；拖拽结束后立即清理这些临时事件并重置状态。

优化后的代码 #

第一步：一次性初始化所有droppable #

// 一次性初始化所有will-be-drop为禁用状态的droppable
$('.will-be-drop').droppable({
  disabled: true, // 默认禁用，不响应drop事件
  drop: function(event, ui) {
    let item = ui.draggable;
    console.log(item[0]);
    item.detach().appendTo($(this));
  }
});

第二步：配置draggable的拖拽生命周期事件 #

$('.will-be-drag').draggable({
  helper: 'clone',
  // 拖拽开始时，添加临时事件监听
  start: function() {
    // 用事件委托绑定到表格父容器，仅绑定2个事件而非3000个，性能拉满
    $('table').on('mouseenter.dragSession', '.will-be-drop', function() {
      $(this).droppable('enable'); // 悬停时启用当前droppable
    }).on('mouseleave.dragSession', '.will-be-drop', function() {
      $(this).droppable('disable'); // 离开时禁用
    });
  },
  // 拖拽结束时，清理临时事件并重置状态
  stop: function() {
    // 移除带命名空间的临时事件，避免影响其他业务逻辑
    $('table').off('mouseenter.dragSession mouseleave.dragSession');
    // 确保所有droppable回到禁用状态
    $('.will-be-drop').droppable('disable');
  }
});

方案优势 #

• 性能最优：仅初始化一次droppable，拖拽时用事件委托减少事件绑定数量（从3000个降到2个），完全避免大量DOM操作带来的卡顿。
• 逻辑精准：仅在拖拽过程中响应will-be-drop的悬停事件，拖拽结束后立即清理状态，无多余事件监听残留。
• 可维护性高：通过事件命名空间dragSession精准移除临时事件，不会干扰页面其他鼠标事件逻辑。

补充说明 #

如果will-be-drop的父容器不是表格，将代码中的$('table')替换为对应的父容器选择器（比如$('.drop-container')）即可，事件委托的核心逻辑保持不变。

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