jQuery动态新增drop元素droppable功能失效的原因及解决方法

• jQuery UI 的droppable()绑定逻辑为初始化时一次性绑定，仅会对执行方法时已经存在于DOM树中的匹配元素生效，不会自动监听后续新增的DOM节点。
• 你的代码中$(".drop").droppable()在页面初始加载完成后就执行了，此时页面只有静态渲染的Old对应的.drop元素完成了droppable初始化。后续在拖拽start事件中动态插入的.drop元素没有执行过初始化逻辑，因此无法触发drop回调。

将droppable的配置抽为公共对象，每次新增.drop元素时，先给新元素初始化droppable再插入DOM即可，修改后的完整JS代码如下：

$(function() {
  // 抽离公共的droppable配置，避免重复写逻辑
  const droppableOptions = {
    revert: "valid",
    drop: function(event, ui) {
      alert(1);
    }
  };

  // 初始化页面原有静态.drop元素
  $(".drop").droppable(droppableOptions);

  $(".drag").draggable({
    start: function(event, ui) {
      // 生成新的drop节点
      const $newDrop = $('<div class="drop">New</div>');
      // 给新节点初始化droppable能力
      $newDrop.droppable(droppableOptions);
      // 插入到目标容器
      $(".to_drop").append($newDrop);
    }
  });
});

修改后原有静态元素和动态新增的元素都可以正常触发drop事件。

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