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

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" 选项，一切都会好起来的 :) 这个助手克隆了一个项目。