jQuery 可排序 - 物品有时会在掉落时消失

Question

我有 30 多个可排序列表，其中一些列表在左侧，另一个在手风琴中（见下图 - 仅显示 6 个）。我希望能够将手风琴列表中的项目移动到其他列表，反之亦然，但不能在手风琴选项卡之间移动。

效果很好，但只有一个令人讨厌的行为。有时，当我尝试将一个项目从一个列表移动到另一个列表时，它会消失（它 "flies" 到屏幕顶部）并最终出现在另一个列表中；例如：从列表 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 link。如果您从手风琴中拖出一个项目并将其放入例如在 "box-left-1" 上方一点点，该项目将消失并落在手风琴中的某个位置。我有一个从手风琴中删除该项目的解决方案，但我也想将该项目放在目标框中。有人能帮我吗？

Answer 1

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

$.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"));
});

jQuery 可排序 - 物品有时会在掉落时消失

jQuery sortable - item sometimes disappears on drop

javascript

jquery

jquery-ui-sortable