jQuery UI Sortable - ConnectToSortableの問題

Question

私はドラッグのためのアイコンをドロップするために&を作成しようとしています。基本的には、3つのdivコンテナがあり、それぞれには順序付けられたリストが内部にあります。最初のリストはアイコン（<li><img /></li>）を保持し、残りの2つは空であり、ドラッグ、ドロップ、およびソートされたアイコンを受け取るはずです。各空のリストは、アイコンがフロントエンドに表示される行に関連付けられます。

また、Ctrl/Cmd +左マウスクリックで項目を選択できる機能を作成しました。これにより、ユーザーは一度に複数のアイコンをドロップできます。

1つの問題を除いて、すべてが期待通りに機能します。カスタムCtrl/Cmd +クリックオプションは、既にドロップされたドラッグ可能な要素の作業を停止します。

実現後、私はいくつかのテストを行い、できるだけそれを絞り込んだ。原因は「Draggable」機能のConnectToSortableパラメータだと思われる。パラメータがコメントアウトされている場合、Ctrl +クリック機能は期待通りに機能します。問題は、各空のリスト（行）に関連付けられたすべてのアイコンを格納するためにこのパラメータを使用して、後でそれらを取得できるようにすることです。ここで

が私のHTMLコードです：

<div id="container"> 
<div id="row1" class="row"> 
    <ol class="drop-container"> 
     <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li> 
    </ol> 
</div> 
<div id="row2" class="row"> 
    <ol class="drop-container"> 
     <li class='draggable'><span class="squares red-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares red-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares red-squares">&nbsp;</span></li> 
    </ol> 
</div> 
<div id="row3" class="row"> 
    <ol class="drop-container"> 
     <li class='draggable'><span class="squares green-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares green-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares green-squares">&nbsp;</span></li> 
    </ol> 
</div> 

そして、ここでは私のJSコードです：

$(function() { 
// Custom function for Ctrl-Cmd Left Mouse Click 
$(".draggable, .ui-draggable").click(function(e) { 
    if (e.ctrlKey || e.metaKey === true) { 
     if (!$(this).hasClass("selected")) { 
      $(this).addClass("selected"); 
     } else { 
      $(this).removeClass("selected"); 
     } 
    } 
}); 
// Draggable 
$('.draggable').draggable({ 
    connectToSortable: ".drop-container", 
    delay: 200, 
    drag: function(event, ui) { 
     $(".selected").removeClass("selected"); 
    }, 
    helper: "original", 
    revert: "invalid", 
    revertDuration: 300 
}); 
// Droppable 
$('.drop-container').droppable({ 
    tolerance: "touch" 
}); 
// Sortable 
$('.drop-container').sortable({ 
    appendTo: ".drop-container", 
    connectWith: ".drop-container", 
    items: ".draggable", 
    revert: true 
}); 
// Disable selection of items 
$("div, ol, ul, li, span").disableSelection(); 
});​ 

私はこれをテストするためにJSfiddleを作った、と私は再現することができましたエラー。このテストでは実際の画像の代わりにスパンを使用しています。

何か間違っているのですか、これはjQuery UIのバグですか？あらゆるアイデアや回避策が大歓迎であり、感謝しています！

Answer 1

項目がで落とされたらあなたは

$('.drop-container').sortable("refresh"); 

を行う必要があります参照してください。http://jqueryui.com/demos/sortable/#method-refresh