2

I'm trying to wrap my head around the proper use of jQuery UI's droppable facility. I'm working on a list that, eventually, will function as a queue. It's for a book club where customers can choose which books they want shipped to them, and in what order. It's similar to Netflix's original business model (before streaming) where users could set up a queue of DVDs they wanted interested in.

So, there will be two lists, one representing the user's queue, and the other representing eligible items. They can drag items from the list of eligible items to their queue. In this case, the item stays in the "eligible items" list, and a clone is added to their queue (because they can add multiple of the same item).

The queue should be reorderable via drag and drop, but I haven't gotten that far yet. One step at a time.

While working on the "drag from list of eligible items to queue list" step, I ran into the following issue: new items that were added to the list were not a drop target. Looking at the code, this made sense:

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

You can see that the droppable listener is only for items in #list1 during initialization. So when you drag something there from #list2, it gets added to the list, but there no listener for drop events.

I fixed this by adding a drop listener to every item add to the list (see fiddle):

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

but I'm not sure if there's a better way. I tried moving the drop listener to list to drop events on the #list1 itself, but I couldn't figure out how to tell which list item an element got dropped on. event.target is the ul element, not the individual li.

Am I going in the right direction with this?

-Josh

4

1 回答 1

5

我认为您真正想要的是用户列表的可排序，然后是“合格项目”的所有可拖动

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

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

于 2013-09-02T18:21:19.147 回答