jQuery Sortable复制原始列表中的已删除项目答案

【问题标题】：jQuery Sortable duplicating dropped item in origin listjQuery Sortable复制原始列表中的已删除项目
【发布时间】：2020-06-23 14:26:35
【问题描述】：

我在一个页面上有 2 个 sortable() 元素，.draggable_to 和 .elements_draggable。后者是我可以拖到前者的元素。

下面是初始化这些的代码：

$('.draggable_to').sortable({
    update: function (e, ui) {              
        if(ui.sender) {
            var dropped_elem = $(ui.sender.children()[0].innerHTML);
            var html = self.generateElementHTML(dropped_elem.attr('data-type'));
            ui.item.html(html);
        }
        ui.sender.data('copied', true);
    }
});
$('.elements_draggable').parent().sortable({
    placeholder: 'ui secondary segment green',
    connectWith: '.draggable_to',
    helper: function (e, li) {
        this.copyHelper = li.clone().insertAfter(li);
        $(this).data('copied', false);
        return li.clone();
    },
    start: function(e, ui) {
        ui.placeholder.html("Add new " + ui.helper[0].innerText + " element.");
    }
});

当某物从.elements_draggable 拖到.draggable_to 时，原元素应该是重复的，然后我用generateElementHTML() 生成的一些自定义html 替换所说的重复元素。 p>

这可行，但我遇到了.elements_draggable 列表的问题。出于某种原因，当我开始从.elements_draggable 中拖动某些内容时，我能够将该元素放置回到同一个列表中，并在此过程中复制它。

这里有一些图片，希望能说明我的意思。

注意：我知道containment 选项，但我不想使用它有两个原因：

我不喜欢它的行为方式。这对用户来说非常刺耳。
这会导致一个问题，即在添加了几个元素后，我无法将内容添加到 .draggable_to 列表的底部。

如何防止被拖出的元素复制到它们被拖出的同一个列表中？

【问题讨论】：

标签： javascript jquery jquery-ui-sortable

【解决方案1】：

我可以通过将可拖动对象列表更改为 jquery-ui 的 draggable() 而不是 sortable() 来解决此问题。

$('.draggable_to').sortable({
    update: function (e, ui) {              
        var dropped_elem_type = ui.item.attr('data-type');          
        var html = self.generateElementHTML(dropped_elem_type);     
        ui.item.attr('style', null);
        ui.item.html(html);
    }
});
$('.draggable_element').draggable({
    connectToSortable: '.draggable_to',
    helper: "clone",
});

【讨论】：