Javascript 如何创建一个jQuery UI可拖放列表，其中添加到列表中的元素也是拖放目标

我正试图正确使用jQueryUI的可拖放功能。我正在研究一个列表，它最终将作为一个队列。这是一个图书俱乐部，在那里顾客可以选择他们想要的图书，以及它们的顺序。这类似于Netflix最初的商业模式（在流媒体播放之前），用户可以设置他们感兴趣的DVD队列

因此，将有两个列表，一个表示用户的队列，另一个表示符合条件的项目。他们可以将符合条件的项目列表中的项目拖到队列中。在这种情况下，项目将保留在“合格项目”列表中，并将克隆添加到其队列中（因为它们可以添加多个相同的项目）

队列应该可以通过拖放来重新排序，但我还没有做到这一点。一步一个脚印

在执行“从符合条件的项目列表拖动到队列列表”步骤时，我遇到了以下问题：添加到列表中的新项目不是拖放目标。看看代码，这是有道理的：

<ul id='list1'>
    <li>Some</li>
    <li>Thing</li>
</ul>

<ul id='list2'>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Electric Banana</li>
    <li>Flamingo Pink</li>
</ul>

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({
        drop: function(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = jQuery.clone(ui.draggable[0]);
            // Get rid of the inline styles that jQuery has put on the element.
            jQuery(event.target).before(dropElement);
        }
    });
});

但我不确定是否有更好的方法。我尝试将drop listener移动到list，以便在#list1本身上删除事件，但我不知道如何判断元素在哪个列表项上被删除。event.target是ul元素，而不是单个li

我的方向对吗

---

-Josh

我想你真正想要的是对用户列表进行排序，然后对“符合条件的项目”进行所有可拖动

---

太棒了。要是我在12小时前就知道就好了！

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({ drop: dropHandler });

    function dropHandler(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = $.clone(ui.draggable[0]);
            $(dropElement).droppable({ drop: dropHandler });
            // Get rid of the inline styles that jQuery has put on the 
            $(event.target).before(dropElement);
        }
});

jQuery(function($) {
    $('#list2 li').draggable({
        cursor: 'move',
        helper: 'clone',
        connectToSortable: "#list1",
    });
    $('#list1').sortable({
        revert: true,
    });
});