javascript - jquery sortable ui 在拖动到特定 div 时删除项目

Question

我正在使用jQuery sortable插件

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

我想要做的是当我将一个项目从可排序项拖到特定的 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了解详情。