当拖动到特定div时，jquery sortable ui remove item

Question

我正在使用jQuery sortable插件

我有两个连接的块，一个是可拖动的，另一个是可排序的。

我想要做的是将项目从可排序项拖动到特定div中以将其删除。

这是标记：

  <div>Draggable source items
    <ul>
        <li class="draggable" class="ui-state-highlight">Drag me down</li>
        <li class="draggable" class="ui-state-highlight">Drag me down 2</li>
        <li class="draggable" class="ui-state-highlight">Drag me down 2</li>

    </ul>
</div>

<div>Sortable List 1
    <ul class="sortableList">

    </ul>
</div>

<div class="test">
     <!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
</div>

JS：

   (document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/
    });
    $(".draggable").draggable({
        connectToSortable: '.sortableList',
        cursor: 'pointer',
        helper: 'clone',
        revert: 'invalid'
    });
});

这是jsfiddle

Answer 1

怎么样？

$('.droppableArea').droppable({
    accept: 'li',
    drop: function(event, ui) {
        ui.helper.remove();
    }
});

我用'droppableArea'类标记了你的可放置DIV。有关详细信息，请参阅fiddle。