jquery可排序ui在拖动到特定div时删除项

我正在使用 jQuery sortable 插件

我有两个街区相连,一个是可拖动的,另一个是只能排序的。

我想做的是,当我将一个项目从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