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
        });
    });

有没有办法确定一个项目是否来自可排序本身？我希望添加项目，如果我从外面拉入它们，但如果我在列表中重新排序

则不需要

更新：（也许）重要信息： FIRST排序有效。之后的每一种复制项目

谢谢：）

解决方案：

我有一个setInterval设置为每5秒重新加载播放列表。这解释了一切：第一个或两个排序工作得很好，然后重新加载列表，然后当我排序时，项目被“从外部”考虑并添加。我删除了间隔，它的工作原理：）

Answer 1

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

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

1 个答案: