Jquery可排序UI删除项目时，拖动到一个特定的div

Question

我使用jQuery排序插件

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

我想做的是，当我把一个项目从可排序栏拖到一个特定的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'
    });
});

这是一个jsfield

Answer 1

这个怎么样?

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

我用'droppableArea'类标记了你的可拖动DIV。