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

Question

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

Answer 1

在你引用的演示中,实际上有一个bug; 在你向下拖动一个项目之后,它会将一个与其兄弟的副本li一起克隆id到DOM中,所以要小心(提交了一个有关此问题的错误但是周围没有任何活动).

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

1. 为了解决我上面描述的演示的限制,而是将一个class可应用的项目应用于将链接到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. 点击可排序的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/

希望有所帮助.