16

我正在使用 jQuery UI Draggable/Sortable 演示 (http://jqueryui.com/demos/draggable/#sortable) 作为我项目的基础。<li>当可排序接收到它时，我需要获取对克隆到可排序中的引用。我尝试了 sortable 的接收事件，但这只给出了对原始 draggable 的引用<li>，而不是它的克隆。

4

3 回答 3

30

在您引用的演示中，实际上存在一个错误；在您将一个项目向下拖动后，它会插入一个克隆li，id它是其兄弟的副本到 DOM 中，所以要小心（已提交了一个关于此的错误，但周围没有任何活动）。

我做了一些事情来实现这一点：

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

    <ul>
    <li class="new-item ui-state-highlight">Drag me down</li>
</ul>

  2. 使具有该类的项目可拖动，而不是通过以下方式选择元素id：

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

  3. 利用 sortable的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("<b>HI</b>");
        }
    }
});

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

这是一个工作示例：http: //jsfiddle.net/andrewwhitaker/twFCu/

希望有帮助。

于 2011-02-12T01:59:23.423 回答
1

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

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

当然，该类在删除之后就被删除了，所以引用丢失了，你不能做任何不是立即的事情。

上面的答案更可靠，但如果你很着急......

于 2012-09-08T17:27:30.927 回答
1

如果您不害怕访问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（撰写本文时的当前版本）中它也可以工作。

于 2015-06-18T12:46:43.977 回答