Как сделать выпадающий список пользовательского интерфейса jQuery, где элементы, добавленные в список, также являются целями перетаскивания

Я пытаюсь понять, как правильно использовать возможность сброса пользовательского интерфейса jQuery. Я работаю над списком, который, в конечном счете, будет функционировать как очередь. Это для книжного клуба, где клиенты могут выбирать, какие книги они хотят отправить им и в каком порядке. Это похоже на первоначальную бизнес-модель 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, оно добавляется в список, но прослушивателя событий перетаскивания нет.

Я исправил это, добавив прослушиватель перетаскивания к каждому элементу, добавленному в список (см. 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);
        }
});

но я не уверен, что есть лучший способ. Я попытался переместить прослушиватель отбрасывания в список, чтобы отбрасывать события в самом #list1, но я не мог понять, как определить, на какой элемент списка был удален элемент. event.target — это элемент ul, а не отдельный li.

Я иду в правильном направлении с этим?

-Джош