Javascript 使用jquery ui有选择地拖放和删除元素

大家好。 我有一个简单的界面，有3个“区域”。用户拥有的元素列表，用户可以拖动他拥有的元素并对其进行排序的位置，以及用户可以拖动任何元素的位置，如果该元素来自第二个组，则删除该元素

这就是我到目前为止所做的：

<div class="col-md-12">
        <h1 id="trash" style="background:#f00;">drop here to delete (trash)</h1>
        </div>
    <div class="col-md-12">
    <h1>take your elements from here (library)</h1>
        <div class="group">
            <ul class="playlists">
                <li class="mymedia" data-id="1453">element 0</li>
                <li class="mymedia" data-id="6565">element 1</li>
                <li class="mymedia" data-id="1222">element 2</li>
                <li class="mymedia" data-id="8888">element 3</li>
            </ul>
        </div>
    </div>
    <div class="col-md-12">
    <h1>drop here your elements, and sort them (playlist)</h1>
        <div class="group">

            <ul class="playlists droppable" style="background:#777; min-height:30px;">

            </ul>
        </div>
    </div>

我缺少的是一点技巧。我希望只有放在播放列表中的元素是可删除的（现在，将任何元素拖到垃圾箱中，都会将其删除），而放在“库”中的元素不是可删除的，只能拖到播放列表中。我试过这个，但运气不好：

$('.droppable').sortable({
drop: function (event, ui) {
            ui.draggable.addClass("deletable");
        }});

    $(".mymedia").draggable({
        connectToSortable: '.droppable',
        helper: 'clone'
    });

    $('#trash').droppable({
        drop: function (event, ui) {
            ui.draggable.hasClass("deletable").remove();
        }
    });

---

我搞错了什么？我可以在这方面向您寻求帮助吗？

您可以通过添加一个类来处理它，并仅删除获取该类的元素，例如：

$('.droppable').sortable({
    stop: function (event, ui) {
        ui.item.addClass('dropped');
    }
});

$(".mymedia").draggable({
    connectToSortable: '.droppable',
    helper: 'clone'
});

$('#trash').droppable({
    drop: function (event, ui) {
        if (!ui.draggable.hasClass('dropped')) return false;
        ui.draggable.remove();
    }
});

---

你把图书馆叫做什么？第二个或第一个播放列表？？？你是对的，我输入了代码，插入了一些名字：D

$('.droppable').sortable({
    stop: function (event, ui) {
        ui.item.addClass('dropped');
    }
});

$(".mymedia").draggable({
    connectToSortable: '.droppable',
    helper: 'clone'
});

$('#trash').droppable({
    drop: function (event, ui) {
        if (!ui.draggable.hasClass('dropped')) return false;
        ui.draggable.remove();
    }
});