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

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

解决方法

在您参考的演示中，实际上有一个错误;在拖动项目之后，将一个克隆的li插入到一个与其兄弟的DOM重复的id中，所以请注意(一个 bug被提交了，但没有任何活动)。

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

>为了解决我上面描述的演示的局限性，而是将一个类应用于可链接到可排序的可拖动项：

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

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

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

>点击可排序的stop event，并对被删除的项目执行一些简单的逻辑，利用类新项目的项目只能被删除(并不仅仅是可排序的现有项目)：

$("#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/

希望有帮助。

原文地址：https://www.jb51.cc/jquery/181941.html