1

私はulでソート可能なjqueryを使用しており、以下の8つのliアイテムを移動できます。

ここに画像の説明を入力してください

これを制限したいので、imgを持つliアイテムのみを並べ替えることができます(最初の3つのアイテムの上)が、次のことが発生する可能性があります(たとえば、3つの画像を非画像のliの間で移動できます):

ここに画像の説明を入力してください

私は次のHTML構造を使用しています(クラスがソートできない上記の写真に関連しています):

<ul id="photoPreviews>
<li class="unsortable">elements</li>
<li class="unsortable">elements</li>
<li>elements</li>
<li class="unsortable">elements</li>
<li>elements</li>
<li class="unsortable">elements</li>
<li>elements</li>
<li class="unsortable">elements</li>
</ul>

キャンセルを使用した現在のJQUERY:

$('ul#photoPreviews').sortable({
  cancel: 'li.unsortable'    
});

すべてのli要素は、最初にソート不可能なクラス(.sortable()cancelに接続されている)で始まり、画像がliに追加されると、このクラスは削除されます。そして、私はそれらのアイテムをソート不可能なクラスでソートできないことに気付きました。

ただし、画像のないliアイテムを画像のないアイテムの間に移動することはできます。

質問:画像付きのliアイテムのみが相互に移動できるように制限するにはどうすればよいですか?この例では、最初の3つで相互に場所を変更できますか?並べ替え可能なアイテムをグループ化する方法はありますか?

ありがとうございました

4

1 に答える 1

1

「アイテム」オプションを使用すると、ソート可能な要素を変更できますhttp://jqueryui.com/demos/sortable/#option-items

例: http://jsfiddle.net/cjc343/55rzM/

于 2012-09-14T01:32:57.677 に答える