jQuery UI Draggable / Sortable – 获取对新项目的引用

我使用jQuery UI Draggable / Sortable演示（http://jqueryui.com/demos/draggable/#sortable）作为我项目的基础。 我需要获得对

的引用，当可排序接收它时，它会被克隆到sortable中。 我尝试了sortable的receive事件，但是它只提供了对原始draggable

的引用，而不是它的克隆。

Answer 1

在你引用的演示中，实际上有一个bug; 在你向下拖动一个项目后，它会插入一个带有id的克隆li ，这个id是其兄弟的副本到DOM中，所以要小心（有关此事件的错误但是周围没有任何活动）。

我做了一些事情来实现这个目标：

1. 为了解决我上面描述的演示的限制，而是将class应用于将链接到sortable的可拖动项：

    
    
   Drag me down
     

2. 使该类具有可拖动的项目，而不是按id选择元素：

     $(".new-item").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); 

3. 点击可排序的stop事件 ，并执行关于已删除项目的一些简单逻辑，利用具有类别new-item只能被删除的事实（并且不仅仅是可排序项目中的现有项目） ）：

    $("#sortable").sortable({ revert: true, stop: function(event, ui) { if (ui.item.hasClass("new-item")) { // This is a new item ui.item.removeClass("new-item"); ui.item.html("HI"); } } }); 

请注意，您可以使用data-*属性而不是添加帮助程序类。

这是一个有效的例子： http ： //jsfiddle.net/andrewwhitaker/twFCu/

希望有所帮助。

Answer 2

如果你想要另一个非常粗略和准备好的方法来获取该项目只是为了删除它或其他东西，只需在drop中引用它

 var _clone = $(".ui-draggable-dragging"); 

当然，在删除之后该类被删除，因此引用会丢失，并且您无法执行任何不立即执行的操作。

上面的答案更加强大，但如果你疯狂匆匆……

Answer 3

如果您不担心访问Sortable的内部状态，您可以执行以下操作：

 $('#sortable').sortable({ receive: function() { // Sortable.currentItem refers to the item just added. // jQuery UI < 1.10 uses "sortable" as its data key, // jQuery UI >= 1.10 defines an "instance" method to get the current instance. var $item = ( $('#sortable').data('sortable') || // jQuery UI < 1.10 $('#sortable').sortable('instance') // jQuery UI >= 1.10 ).currentItem; } ); 

小提琴： http ： //jsfiddle.net/t33bt/12/

请记住，这可能不再适用于未来的jQuery UI版本，因为它不使用官方API 。 但是它仍然适用于jQuery UI 1.11（截至撰写本文时的当前版本）。