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'
    });
});

这是一个jsfiddle

Answer 1

这个怎么样？

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

我用“ droppableArea”类标记了您的可放置DIV。 有关详情，请参见小提琴 。