jQuery 动态重新初始化/刷新可拖动/可排序元素

Question

我有一些在ready() 事件中加载的函数。这些基本上使列表可拖动，其他区域可放置/可排序。例如。您可以将克隆拖动到多个区域(div 中的列表)，并且在这些多个区域中，您可以对它们进行排序/重新排序(但仅限在每个区域内)。这非常有效。

我有一个按钮，可以动态创建一个新区域，以便将项目放入其中，然后进行排序。它完美地创建了新区域，但您无法将项目放入其中，甚至无法使它们可排序。

我意识到这与我使用ready()事件在页面加载时使所有区域可放置/可排序有关，而不是实际动态地重新运行这些函数。

我尝试在按钮的单击功能内的这些元素上使用“刷新”。例如。

$(".field > li").draggable('refresh');
$(".dragrow1, .dragrow2").droppable('refresh');
$(".dragrow1, .dragrow2").sortable('refresh');

但这行不通。如果可以的话，我想避免以任何方式重复我的代码。有办法让这项工作发挥作用吗？我认为如果有类似于“live()”函数的东西可以与“ready()”一起使用，那么这可能是一个解决方案，但没有......!

谢谢。

Answer 1

为什么不将初始化代码编写为您自己的 jQuery 插件？然后你的初始化代码以及添加动态元素的代码就可以这样设置。

jQuery(function() {
  jQuery.fn.myDroppableSetup = function myDroppableSetup() {
    this.each(function() {
      // your setup code here
    });
    return this;
  };
  jQuery.fn.myDraggableSetup = // ...
});

然后，当您动态添加内容时，您可以重复使用它:

$('div.newlyAddedDroppable').myDroppableSetup();