jQueryのUIはちょうど

Question

を移動ここに私のバイオリンだ、並べ替えずにソート可能な使用：http://jsfiddle.net/MtgbM/

は、ここでのルールです： 一覧-Aは、アイテムの私のリストです。

• 私は、彼らはそれがまだリスト-Aにとどまる-Bをリストにドラッグしているときに私がList-A（から物事を「削除」することはできないはず
• -リストを並べ替えることができないはずですが、コピーは私がする一覧-Bから物事をドラッグできないようにする必要があり
• ）リストBをするために移動してリスト

一覧-Bは、私のソース

• である私は、アイテムを削除することができますLiからST-B（それらをオフにドラッグ）
• 私はかなりそれだリスト-B

内の項目を並べ替えることができます。基本的にList-Aはソース、List-Bは宛先です。これのほとんどは、List-Aの箇条書き＃1と箇条書き＃2についてはわかりませんが、JQueryを使って設定することができます。 List-Aを "Unsortable"にするにはどうすればいいですか？アイテムを移動するのではなく、どのように "Clone"にするのですか？

すべてのヘルプはあなたがすべてはこのためのソート可能になりたくない

Answer 1

をいただければ幸いです。トップリストで

<li> sがhelper: 'clone'とdraggablesする必要があり、このhelperオプションは、リスト自体を変更することなく、リストの中から<li>秒のコピーをドラッグすることができます。だから、これで始まる：

$('#list-A li').draggable({ 
    helper: 'clone' 
}); 

その後、あなたは下のリストdroppableを作成する必要があり、それらが落下しているときの要素のクローンを作成します。あなたはdropイベントを使用してクローニングを行うことができます。

$('#list-B ul').droppable({ 
    drop: function(event, ui) { 
     $(this).append($(ui.draggable).clone()); 
    } 
}); 

あなたは下のリストに周りのものを移動できるようにしたいとsortableの出番なのです下のリストはソート可能なだけでなく、ドロップ可能でなければなりませんので。あなたはまた、それらをソートしている間だけ、複製可能なものを複製から守る必要があります。 startとstopのソート可能なイベントを使用してdataフラグを設定し、次にドロップ可能なdropイベントハンドラでそのフラグを確認できます。ソート可能なため、このような何か：その後、

$('#list-B ul').sortable({ 
    start: function(event, ui) { 
     ui.item.data('sorting', true); 
    }, 
    stop: function(event, ui) { 
     ui.item.removeData('sorting'); 
    } 
}); 

とdropイベントハンドラにチェックを追加します。

$('#list-B ul').droppable({ 
    drop: function(event, ui) { 
     if(ui.draggable.data('sorting')) 
      return; 
     $(this).append($(ui.draggable).clone()); 
    } 
}); 

デモ：http://jsfiddle.net/ambiguous/PyWAM/