web-dev-qa-db-ja.com

jQuery UIで複数のソート可能なリストを相互に接続するにはどうすればよいですか？

私はjQueryを初めて使用するので、jQuery UIのsortableを使用することにまったく苦労しています。

アイテムのグループ化と順序付けを容易にするために、ページをまとめようとしています。

私のページにはグループのリストがあり、各グループにはアイテムのリストが含まれています。ユーザーが次のことを行えるようにしたい：

  1. グループを並べ替える
  2. グループ内のアイテムを並べ替えます
  3. グループ間でアイテムを移動する

最初の2つの要件は問題ありません。私はそれらをうまく分類することができます。問題は3番目の要件で発生します。それらのリストを相互に接続することはできません。いくつかのコードが役立つかもしれません。これがマークアップです。

_<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>  
_

_document ready function_に$('#groupsList').sortable({});と$('.itemsList').sortable({});を入れることで、リストを並べ替えることができました。 connectWithのsortableオプションを使用して機能させようとしましたが、見事に失敗しました。私がやりたいのは、every groupItemsXリストをすべてのgroupItemsXリストに接続することですが、それ自体です。どうすればいいですか？

私はリストをそれ自体に具体的に接続しないようにする必要があると考えていました。確かに、私はExcelを使用していませんが、スタックオーバーフローなどを引き起こす可能性のある、無限の再帰が発生する可能性があるように思われました。うーん。駄洒落でごめんなさい。どうしようもなかった。

とにかく、私はこのようなことをやろうとしていましたが、うまくいきませんでした：

_$('.groupsList').sortable(); // worked great  
$('.groupsList').each( function () {  
    $(this).sortable( {  
        connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];  
    });  
});  
_

私はそこで構文を完全に壊したと確信しています。そもそもそれが私が質問をしなければならなかった理由だと思います。リストから現在のアイテムをフィルタリングすることは、パフォーマンスの面で必要または役立ちますか？

AdamとJimmyPによって提供された両方の回答は、IEで動作しました（ただし、FireFoxでは実際に奇妙に動作し、再ソートしようとするとリストアイテムが上書きされます）。あなたの回答の1つを受け入れますそして、他に投票しますが、フィルタリングについてのアイデア/提案があれば、私はそれを聞きたいです。

javascriptjqueryajaxjquery-uijquery-ui-sortable
32
Abs

connectWithに使用した構文を含めることができますか？他のグループのリストを（セレクターであっても）大括弧で囲みましたか？あれは：

...sortable({connectWith:['.group'], ... }
23
Adam Bellaire

これはうまくいくはずです：

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});
17
James
 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

これですべてうまくいきます！私のためにここで同じことをしています。 HTMLを変更する必要はありません。

2
Mrigesh Raj Shrestha