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

Question

大家好。我有一个简单的界面，有 3 "zones"。用户拥有的元素列表，用户可以拖动他拥有的元素并可以对它们进行排序的地方，以及用户可以拖动任何元素的地方，如果该元素来自第二组，则删除该元素。

这是我目前所做的：

<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/

我缺少的是一个有点棘手的问题。我希望只有放到播放列表中的元素是可删除的（现在，将任何元素拖到垃圾桶中，都会将其删除），而 "library" 中的元素不可删除，只能拖动到播放列表中。我试过了，但没有成功：

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

我误会了什么？我可以请你帮忙吗？

Answer 1

您可以处理它添加一个 class 并仅删除获得此 class 的元素，例如：

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

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

drag, drop and delete elements selectively with jquery ui

javascript

jquery

jquery-ui

droppable

draggable

-jsFiddle-