jQuery sortable - 项目有时会在drop上消失

Question

我有超过30个可排序列表，其中左侧有许多列表，另一个是手风琴（见下图 - 只有6张图）。我希望能够将手风琴列表中的项目移动到其他列表，反之亦然，但不能在手风琴标签之间移动。

效果很好，但只有一种烦人的行为。有时候，当我尝试将一个项目从一个列表移动到另一个列表时，它会消失（它“飞到”屏幕的顶部）并最终进入另一个列表;例如：从列表D到列表A，但最终在手风琴选项卡3中，或从列表C到列表B，但最终在手风琴选项卡2中。

//for each list in the accordion, I created the sortable like this
$accordionSortableList.sortable({
    connectWith: ["#listA,#listB,#listC"],
    start: cloneContentItem,
    stop: onSortableStop,
    receive: onSortableReceive,
    revert: 100
}).disableSelection();

//for the other
$boxSortableList.sortable({
    connectWith: ["#listA,#listB,#listC,#listD,#listE,#listF"],
    receive: onSymbolChanged,
    remove: onSymbolChanged,
    revert: 100
}).disableSelection();

在我看来，正在抛出一个错误的事件。如果删除成功，将抛出receive事件，否则将发生remove事件。

Here是一个JSFiddle链接。如果您从手风琴中拖动一个项目并将其放入，例如在“box-left-1”的顶部，该项目将消失并降落在手风琴的某个地方。我有一个解决方案从手风琴中删除该项目，但我想在目的地框中也有该项目。有人能帮我吗？

Answer 1

在我的代码中，我将手风琴“内容面板”定义为可排序的，这就是奇怪行为的来源。我必须创建一个可排序的容器并将其放入手风琴中。

$.each(rightBoxes, function(index, box) {
    var $accHeader = $("<div>").html(box.title);
    $accHeader.appendTo($("#rightPanel"));

    var $accContent = $("<div>").attr("id", box.id);

    var $contentBox = $("<div>"); // This is important
    $.each(box.items, function (idx, item) {
        var $div = $("<div>").html(item.title);
        $div.appendTo($contentBox);
    });
    $contentBox.sortable({
        connectWith: ["#left-1,#left-2,#left-3"]
    }).disableSelection();
    $contentBox.appendTo($accContent);

    $accContent.appendTo($("#rightPanel"));
});