jQuery UI Draggable/Sortable-获取对新项目的引用 [英] jQuery UI Draggable/Sortable - Get reference to new item

问题描述

我正在使用jQuery UI Draggable/Sortable演示(http://jqueryui.com/demos/draggable/#sortable)作为我的项目的基础.我需要获得对<li>的引用，该引用会在sortable收到时克隆到sortable中.我尝试了sortable的receive事件，但这只引用了原始的可拖动<li>，而不是其克隆.

I am using the jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) for the basis of my project. I need to get a reference to the <li> that gets cloned into the sortable when the sortable receives it. I tried the sortable's receive event, but that only gives a reference to the original draggable <li>, and not its clone.

推荐答案

在您引用的演示中，实际上存在一个错误；在您向下拖动项目后，它会在DOM中插入一个克隆的li和一个id，它是其兄弟的副本，因此请当心(

In the demo you reference, there's actually a bug; after you drag an item down it inserts a cloned li with an id which is a duplicate of its brother's into the DOM, so beware (a bug was filed about this but there's no activity around it).

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

I did a few things to achieve this:

1. 要克服我上面描述的演示的局限性，请对将链接到sortable的可拖动项应用class:

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

使具有该类的项目可拖动，而不是通过id选择元素:

Make items with that class draggable, instead of selecting an element by id:

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

点击可排序对象的 stop事件，并执行一些有关利用以下事实来删除被删除的项目:类别为new-item的项目只能被删除(并且不仅仅是可排序的现有项目):

Tap into the stop event of the sortable, and perform some simple logic about the item that was dropped, leveraging the fact that an item with the class new-item could only have been dropped (and isn't simply an existing item in the sortable):

$("#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-*属性，而不是添加帮助程序类.

Note that you could use the data-* attribute instead of adding a helper class.

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

希望有帮助.

这篇关于jQuery UI Draggable/Sortable-获取对新项目的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！