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 时，原始元素应该是 重复的 ，然后我用一些自定义的元素替换了重复的元素html 从 generateElementHTML().

生成

这行得通，但 .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",
});

jQuery 可排序复制原始列表中的掉落项目

jQuery Sortable duplicating dropped item in origin list

javascript

jquery

jquery-ui-sortable