jquery uiドラッグドロップ+ソート可能

Question

私はドラッグアンドドロップもソート可能にしようとしています。私はdiv 1から2に、div 2からdiv 1にドラッグすることができますが、私はクローンを使用するので、ソート可能な作業を行うことはできません。

アイデア？

$(document).ready(function() { 

    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 

      $(".qitem").draggable({ 
       containment : "#container", 
       helper : 'clone', 
       revert : 'invalid' 
      }); 
     } 
    }); 
}); 

ライブデモ：このあなたはそれを並べ替えしようとしている、またはドラッグされたかどうかを知りませんので、あなたが、再びドラッグドロップボックス内のアイテムを持つことができない動作するためにはhttp://jsfiddle.net/6xXPq/4/

Answer 1

。これを行うために我々はacceptフィルタを追加し、正しくあなたがソートされているアイテムを受け入れるようにドロップハンドラを許可することはできません。この作業を取得するにはExample JSFiddle

$(document).ready(function() { 
    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     accept: ":not(.ui-sortable-helper)", 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 
     } 
    }); 
}); 

：ここ

は、コードを働いていますドロップ可能ハンドラ：

accept: ":not(.ui-sortable-helper)", 

これで、下部のボックスから上部にアイテムをドラッグし、上部のボックスを並べ替えることができます。しかし、もはやトップボックスの外にアイテムをドラッグすることはできません。あなたがそれらを削除するための新しい方法を考案する必要があります

（それはおそらくトップボックスのドラッグ可能/ソート可能な機能との間にスイッチを削除するためのフラグを使用して行うことができます）

Answer 2

私は同じ質問を持っているし、

$('#example-1-4 .sortable-list').sortable({ 
     connectWith: '#example-1-4 .sortable-list', 
     containment: '#containment' 
    }); 

：私は ドラッグと がドロップ可能、ちょうど次のコードを使用して使用するには、この article and demo

不要（デモをチェックアウト）が見つかりません210

重要ポイントはオプションとなります。 of sortable（） これは役に立ちます。