Пользовательский интерфейс jQuery удаляет элемент при добавлении в div с использованием .droppable

Question

Я пытаюсь понять логику того, как это сделать.

У меня много изображений только с именем класса CSS, они создаются динамически.

Эти изображения можно перетаскиватьиспользуя пользовательский интерфейс jQuery .draggable.

Мне нужно иметь «мусорное ведро», которое при перетаскивании элемента удаляется.

Пример : http://jsfiddle.net/KWdcU/3/ (Он предназначен для удаления всех элементов, а не того, что в него перетаскивается)

Код :

<div class ="box">
<div class="stack">one</div>
<div class="stack">two</div>
</div>
<div id="trash">trash</div>​



$(function() {
        $( ".stack" ).draggable();
});

$('#trash').droppable({
            over: function() {
             //alert('working!');
            $('.box').remove();
          }
    });

Answer 1

Перетаскиваемый элемент можно найти с помощью свойства .draggable элемента ui, передаваемого в функцию обратного вызова over, как указано в документах . Как это:

$(function() {
    $(".stack").draggable();

    $('#trash').droppable({
        over: function(event, ui) {
            ui.draggable.remove();
        }
    });
});

Вот обновленный jsFiddle . <ч /> С точки зрения удобства использования, я бы рекомендовал использовать событие drop вместо события over, так как было бы неприятно удалять элемент, непреднамеренно перетаскивая его на корзину.

Answer 2

Лучше использовать падение вместо

$(function() {
    $(".stack").draggable();

    $('#trash').droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });
});