jQuery sortable - アイテムがドロップ時に消えることがあります

Question

私は30個以上のソート可能なリストを持っています。リストの数は左側にあり、もう1つはアコーディオンになっています。アコーディオンのリストから他のリストへ、またはその逆にアイテムを移動できますが、アコーディオンのタブ間では移動できないようにしたいと考えています。

大変効果的ですが、迷惑な動作は1つだけです。時には、あるリストから別のリストにアイテムを移動しようとすると、そのアイテムは消えて（画面の上に「飛んでいます」）、別のリストに終わることがあります。たとえば：リストDからAを一覧表示しますが、Bをリストするアコーディオンタブ3で終わる、またはリストCから、間違ったイベントがあるようですが、私には思える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")); 
});