Question

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

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

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

我失踪的东西有点棘手。我希望只有放入播放列表的元素才能删除（现在，将任何元素拖入垃圾桶，将其删除），而将元素放入＆＃34;库＆＃34;不可删除，但只能拖放到播放列表中。我试过这个，但没有运气：

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

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

$('.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有选择地拖放，删除和删除元素

1 个答案:

-jsFiddle-