基于jQuery的表格内拖拽功能异常问题（使用两组draggable、droppable函数）

嘿，作为jQuery新手遇到这种动态元素的事件绑定问题太正常了，我来帮你梳理清楚原因和解决方案：

问题根源 #

你在页面初始化时就执行了$(".drop-able").droppable(...)，但compose字符串里的.drop-able元素是只有在拖拽图片到表格单元格后才动态添加到DOM中的。页面加载时这些元素根本不存在，所以初始化时的绑定不会作用到后来生成的新元素上——这就是为什么span拖不进去的核心原因。

解决方案：动态生成后再绑定droppable #

我们只需要把.drop-able的droppable绑定逻辑，放到动态元素被添加到DOM之后执行，也就是在td的drop回调函数里，写完$("#slot").html(compose);之后再绑定。

修改后的完整代码如下：

var compose='';
compose +='<div id="data-hide" class="db-click">';
compose +='<p class="margin5 strong drop-able ">';
compose +='<img src="xyz.png" /></p>';
compose +='<p class="margin5 strong drop-able">';
compose +='<img src="abc.png" /></p></div>';

$("#init").draggable( { opacity: 0.5, helper: "clone" } );

$("td").droppable({ 
  tolerance: 'pointer', 
  drop: function(event, ui) { 
    $("#slot").html(compose); 
    // 给刚生成的.drop-able元素绑定droppable功能
    $("#slot .drop-able").droppable({ 
      drop : function(event,ui){ 
        $(this).append(ui.draggable.clone()); 
      } 
    });
  }, 
});

$(".drag-able").draggable({ opacity: 0.5, helper :"clone" });

额外小提示 #

• 给compose加上var声明，避免变成全局变量（也可以用let/const，更符合现代JS规范）；
• 去掉draggable配置末尾的多余逗号，比如{ opacity: 0.5, helper: "clone", }里最后一个逗号，部分浏览器可能会因为这个抛出语法错误。

这样修改后，当你把图片拖到表格单元格生成新的.drop-able元素时，它们会立刻被绑定上droppable功能，span就能正常拖进去啦～

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