2

私は、ユーザーが要素を1つのソート可能(左ボックスと呼びましょう)から別の(右ボックス)にドラッグできる、ソートのドラッグ・ドロップ・リオーダー・ウィジェットに取り組んでいます

ここでの問題は、そのようなウィジェットが複数あることです。

私がやりたいのは、それらをペアリングして、あるウィジェットの左ボックスのアイテムを別のウィジェットの右ボックスにドラッグできないようにすることです。

私の現在の擬似コードは次のとおりです。

<ul class = "left">
...
</ul>

<ul class = "right">
...
</ul>


$('.left').sortable
  connectWith: '.right'

2つのULは兄弟であるため、次のようなものを試しました

$('.left').sortable
  connectWith: '+ .right'

接続された要素を見つけようとしているときに、sortable の内部コードが現在の要素を考慮しないため、これは機能しません。

また、両方の UL の親を指すオプションを使用しようとしましたcontainmentが、それも機能しません。

私に何を提案しますか？

4

1 に答える 1

0

解決しました！

すべてのソータブルのonReceiveコールバックで、次のメソッドを呼び出しました。

checkPairing = (event, ui, el) ->
  firstParent = $(el).parent().get(0)
  secondParent = $(ui.sender).parent().get(0)
  $(ui.sender).sortable('cancel') unless firstParent == secondParent

並べ替え可能なものに対してreceiveイベントが発生するたびに、両方の並べ替え可能な要素（jQueryオブジェクトではなくDOM）の親要素を取得し、それらを比較します。それらが実際にペアである場合、それらは等しくなります。そうでない場合は、イベントをキャンセルします。

（1）2つのjQueryオブジェクトを等式演算子だけで比較することはできず、（2）return false役に立たないため、cancelメソッドを呼び出す必要があることを理解するのに時間がかかりました。

ペアリングは期待どおりに機能します。

于 2012-06-12T09:49:54.987 に答える