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

Question

我正试图围绕正确使用jQuery UI的droppable工具.我正在研究一个最终将作为队列运行的列表.这是一个图书俱乐部,顾客可以选择他们想要运送给他们的书籍,以及订购的顺序.它类似于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);
        }
    });
});

您可以看到droppable侦听器仅用于初始化期间#list1中的项目.所以当你从#list2中拖动它时,它会被添加到列表中,但是没有drop事件的监听器.

我通过向每个添加到列表中的项添加一个drop listener来修复此问题(请参阅小提琴):

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);
        }
});

但我不确定是否有更好的方法.我尝试将drop listener移动到list以删除#list1本身的事件,但我无法弄清楚如何判断哪个列表项被删除了.event.target是ul元素,而不是单个li.

我是否朝着正确的方向前进？

-Josh

Answer 1

我认为您真正想要的是对用户列表进行排序,然后对"符合条件的项目"进行全部可拖动

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

http://jsfiddle.net/petersendidit/gKtXa/5/