使用 jquery ui 选择性地拖放和删除元素答案

【问题标题】：drag, drop and delete elements selectively with jquery ui使用 jquery ui 选择性地拖放和删除元素
【发布时间】：2015-11-04 10:01:27
【问题描述】：

大家好。我有一个简单的界面，有 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>

和javascript：

 $('.droppable').sortable();

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

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

https://jsfiddle.net/peorthyr/dfvxt8g7/

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

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

我弄错了什么？我可以请你帮忙吗？

【问题讨论】：

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

标签： javascript jquery jquery-ui draggable droppable

【解决方案1】：

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

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

-jsFiddle-

【讨论】：