jQuery可以动态地重新初始化/刷新可拖动/可排序的元素 [英] jQuery reinitialize/refresh draggable/sortable elements dynamically

问题描述

我有几个我在ready（）事件中加载的功能。这些基本上使一个列表拖动，其他区域可以丢弃/可排序。例如。您可以将克隆拖放到多个区域（div中的列表），并且在这些多个区域内，您可以对它们进行排序/重新排序（但仅在每个区域内）。这样做完美。

我有一个按钮，动态地创建一个新的区域，让项目被放入，然后排序。它完美地创建了新的区域，但是您不能将项目放入其中，或者甚至使其排序。

我意识到这与我正在做的事情有关所有区域都可以在页面加载时使用ready（）事件进行排除/排序，而不是动态地实际重新运行这些函数。

我已经尝试在这些元素上使用刷新在按钮的点击功能内。例如

  $（。field> li）。draggable（'refresh'）; 
 $（。dragrow1，.dragrow2）。droppable（'refresh'）; 
 $（。dragrow1，.dragrow2）。sortable（'refresh'）; 
  

但这不行。我想避免重复我的代码以任何方式，如果我可以帮助它。有没有办法做这项工作？我认为如果有一些类似于'live（）'的函数，你可以用'ready（）'，那可能是一个解决方案，但是没有...！

谢谢。

解决方案

为什么不将你的初始化代码作为你自己的jQuery加载项？那么你的初始化代码以及添加动态元素的代码可以这样设置。

  jQuery（function（） {
 jQuery.fn.myDroppableSetup = function myDroppableSetup（）{
 this.each（function（）{
 //您的设置代码在这里
}）; 
返回这个; 
}; 
 jQuery.fn.myDraggableSetup = // ... 
}）; 
  

然后，您可以在动态添加动作时重新使用它：

  $（'div.newlyAddedDroppable'）。myDroppableSetup（）; 
  

I have a few functions which I load in the ready() event. These basically make a list draggable, and other areas droppable/sortable. Eg. You can drag a clone into multiple areas (lists in divs), and within these multiple areas, you can sort/reorder them (but only within each area). This works perfectly.

I have a button which dynamically creates a new area for items to be dropped into, then sorted. It creates the new area perfectly, but you cannot drop items into it, or then even make them sortable.

I realise this is something to do with the fact I am making all areas droppable/sortable upon page load using the ready() event, and not actually re-running these functions dynamically.

I have tried using 'refresh' on these elements inside the button's click function. Eg.

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

But this doesn't work. I want to avoid repeating my code in any way if I can help it. Is there a way of making this work? I thought that if there was something similar to the 'live()' function that you can use with 'ready()', then that might be a solution, but there's not...!

Thanks.

解决方案

Why not code your initialization as your own jQuery add-on? Then your initialization code as well as the code that adds dynamic elements can just set things up that way.

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

Then you can just re-use that when you add things dynamically:

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

这篇关于jQuery可以动态地重新初始化/刷新可拖动/可排序的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！