Question

我使用jQuery UI Draggable / Sortable演示（http://jqueryui.com/demos/draggable/#sortable）作为我项目的基础。我需要获得一个对<li>的引用，当可排序接收它时，它会被克隆到sortable中。我尝试了sortable的receive事件，但只提供了对原始可拖动<li>的引用，而不是它的克隆。

Answer 1

在你引用的演示中，实际上存在一个错误;将项目向下拖动后，将一个克隆的li与{兄弟'的副本插入到DOM中，所以要注意（bug已提交此内容但没有活动围绕它）。

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

要解决我上面描述的演示限制，请将id应用于将链接到class的可拖动项目：
```
sortable
```
使该类的项目可拖动，而不是按<ul> <li class="new-item ui-state-highlight">Drag me down</li> </ul>选择元素：
```
id
```
点击可排序的stop event，并执行一些关于已删除项目的简单逻辑，利用类$(".new-item").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" });的项目只能被删除的事实（并且不仅仅是可排序的现有项目：
```
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("<b>HI</b>"); } } });属性，而不是添加帮助程序类。

以下是一个有效的例子：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（截至本文撰写时的当前版本）。

jQuery UI可拖动/可排序 - 获取对新项目的引用

3 个答案: