可拖动的 jQuery UI 不适用于动态创建的 div

Posted 2023-05-08

【中文标题】可拖动的 jQuery UI 不适用于动态创建的 div

【英文标题】：jQuery UI draggable not working with dynamically created divs

【发布时间】：2012-07-02 09:12:56

【问题描述】：

我首先包含了 jquery-1.7.2.min 然后是 jquery-ui-1.8.21.custom.min

那我有 动态创建具有类名的 div 我称它们为可拖动和可选择的 但它不工作。 在dom准备好了

   $.each(a, function (l, i) 
       $('.browser').append("<div class='folder' id=" + i + "></div>");
   );
   $('.folder').selectable().draggable();

这里是小提琴链接 http://jsfiddle.net/2Nh5m/

【参考方案1】：

只需颠倒调用draggable() 和selectable() 的顺序即可：

$('.folder').draggable().selectable() 

http://jsfiddle.net/2Nh5m/1/

【讨论】：

@pahnin 默认情况下，可排序项共享可拖动属性，这会导致方法之间发生冲突。

接受的解决方案也不正确。可选择的仍然不起作用，因为如果您选择一个可选择的元素，插件将向未发生的节点添加一个名为 ui-selected 的类。最重要的是，默认情况下，draggble 和 selectable 似乎不能很好地一起播放。似乎还有另一个关于让两者一起工作的***问题***.com/questions/705250/…

【参考方案2】：

问题在于可拖动功能的应用。

通常，可拖动功能在文档准备好后立即应用于元素，如下面的代码。

$('.draggable').draggable();

这仅对那些已经存在的元素应用可拖动功能，因此它不适用于之后创建的任何元素。

解决方案是将函数也应用于新创建的元素。一旦创建了元素，就使用与上面相同的代码来应用到任何新创建的元素。