jQuery 可排序复制原始列表中的已删除项目

Question

我在一个页面上有 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 替换所述复制元素。

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

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

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

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

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

Answer 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",
});