javascript - 可排序克隆元素而不是排序

Question

我有一个可排序的列表，其中有一些调整。

但最近，当我尝试对列表项进行排序时，列表项会出现重复。(每次我拉一个，就会添加另一个副本)。我不明白为什么。

不幸的是，它不能在 Fiddle 中运行

所以这是代码:

$(function() {
    /**
     * determines if an item is to be removed from the list
     */
    var removeItem;
    $("#tracks").sortable({
        items: "li:not(.placeholder)",
        connectWith: "li",
        placeholder: "sort_placeholder",
        helper: "clone",
        distance: 20,
        sort: function () {
            $(this).removeClass("ui-state-default");
            updatePlaylist();
        },
        over: function (event,ui) {
            updatePlaylist();
            removeItem = false;
            //gets the class of the original item to add to the clipinfo-field
            var originalClass = ui.helper.context.childNodes[0].className;
            var small_slot = originalClass.match(/(\d+)/g)[0];
            var small_clip = originalClass.match(/(\d+)/g)[1];
            // shows the original index in the playlist
            ui.item.context.children[0].innerHTML = small_clip;
            ui.item.context.children[0].classList.add("slot_clip_info");
        },
        out: function () {
            updatePlaylist();
            // if an item is pulled out of the list, it gets marked for deletion
            removeItem = true;
        },
        beforeStop: function(event,ui) {
            // if an item has been pulled out of the list, remove it
            if (removeItem) {
                ui.item.remove();
            }
        },
        stop: function(event,ui) {

            var list = $('#tracks');
            var count = list.children(':not(.placeholder)').length;
            list.children('.placeholder').css("display", count > 0 ? "none" : "block");
            list.children(':not(.placeholder)').each(function() {
                $(this).removeClass().attr('style', '');  // removes the automatically added styles (width etc)
                $(this).addClass("ui-state-default pl_clipEntry");
            })

            // after every update, save the playlist

            savePlaylist();
        }
    });
});


function updatePlaylist () {
var list = $("#tracks");
var count = list.children(':not(.placeholder)').length;
list.children('.placeholder').css("display", count > 0 ? "none" : "block");

list.children(':not(.placeholder)').each(function(index,elem) {
    var button = $(elem).children().eq(1).children().eq(0);
    $(button).attr('onclick', '').unbind('click');
    $(button).click(function(){emitCommand('playlist_clip ' + index);});
})
}

以及项目来自的可拖动:

$(function() {
        $(".pl_clipEntry").draggable({
            appendTo: "body",
            revert: "invalid",
            connectToSortable: "#tracks",
            distance: 20,
            helper: function(){
                return $(this).clone().width($('#placeholder').width());   // for the drag-clone to keep the correct width
            },
            stop: function(ui, event) {
                $($(ui).children("li")[0]).addClass(".slot_clip_info");
             },
            zIndex: 100
        });
    });

有没有办法确定一个项目是否源自可排序本身？如果我从外部拉入项目，我希望添加项目，但如果我在列表内重新排序它们，则不需要添加项目

更新:(也许)重要信息:第一种排序有效。之后的每个排序都会复制该项目

谢谢:)

解决方案:

我有一个 setInterval 设置为每 5 秒重新加载播放列表。这解释了一切:前一个或两个排序工作得很好，然后列表被重新加载，当我排序时，这些项目被认为是“从外部”并添加的。我删除了间隔并且它有效:)

Answer 1

只需删除 helper: "clone" 选项，一切都会好起来的:) 这个助手会克隆一个项目。