33

私はjQueryを初めて使用し、jQueryUIの使用に完全に苦労してい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>

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

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

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

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

私はそこで構文を完全に壊したと確信しています、そしてそれが私が最初に質問をしなければならなかった理由だと思います。リストから現在のアイテムを除外することは、パフォーマンスの観点からも必要または有用ですか？

AdamとJimmyPによって提供された両方の回答はIEで機能しました（FireFoxでは実際に奇妙な動作をしますが、並べ替えようとするとリスト項目が上書きされます）。私はあなたの答えの1つを受け入れ、もう1つに投票しますが、フィルタリングに関するアイデア/提案があれば、それを聞きたいと思います。

4

3 に答える 3

24

に使用した構文を含めることができますconnectWithか? 他のグループのリストを括弧内に配置しましたか (それがセレクタであっても)? あれは：

...sortable({connectWith:['.group'], ... }
于 2008-11-21T23:05:17.670 に答える
17

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

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});
于 2008-11-22T09:53:05.443 に答える
2 
 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

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

于 2012-06-05T12:14:54.397 に答える