4

フォームのネストされたリストを作成しました...

<ol>
    <li>Group One
        <ol>
            <li>Item1 in group one</li>
        </ol>
    </li>
    <li>Group Two
        <ol>
            <li>Item1 in group two</li>
        </ol>
    </li>
    <li>External Item 1</li>
    <li>External Item 2</li>
</ol>

Jquery UI を使用して、リストを並べ替え可能にしたので、たとえば、外部項目 1 をグループ 1 に入れ子にすることができ、外部項目とグループを任意の順序で並べ替えることができます。私が防ぎたいのは、ユーザーがグループを別のグループ内にネストできる一方で、リスト内の別の位置にドラッグできるようにすることです。違いはありませんが、リストはグループのコレクションを保持する外部モデルによってカミソリで生成されています。(外部アイテムは、ID の空の GUID を持つグループのメンバーとして保存されます)

簡単に言えば、特定のクラスを<li>子リストに配置しないようにするにはどうすればよいですか? または、子リストに特定のアイテムを拒否するようにするにはどうすればよいでしょうか?

4

2 に答える 2

4

ついにそのなぞなぞを解決しました (またはそのように見えます)。)) 秘訣は、カスタム イベント ハンドラーを割り当てることです。この.stopハンドラーでは、移動した要素がグループであったかどうか、および新しい位置が宇宙空間にあるかどうかという 2 つの条件をチェックします。次のようになります。

$('ol').sortable({
  // to connect inner lists and outer list between themselves 
  connectWith: ".sortable",

  // to intercept a movement  
  stop: function(event, ui) {
    if (ui.item.children('ol').length         // if it's a group...
        && ! ui.item.parent('.outer').length) // but moved within another group
    {
        $(this).sortable('cancel');           // cancel the sorting!
    }
}});

これが概念実証です。内部チェックは、識別子を正しく使用することでさらに簡単になる可能性があります (jsfiddle では、デバッグ目的でのみ使用されます)。

于 2012-07-06T15:01:42.450 に答える
0

これは、「親」の値を指定して sortable の包含オプションを使用することで実現できます。

$( ".selector" ).sortable({ containment: 'parent' });

http://jqueryui.com/demos/sortable/#option-containment

http://jsfiddle.net/bstakes/kQDmZ/

于 2012-07-06T15:02:04.573 に答える