お世話になります。
jQuery UI sortableを使って複数のリスト繋いでいて現状は3つのリストどこからどこでも行き来できるようになっているのですが
これに追加して 1→2 と 2→1 間だけは双方向行き来できないようにしたいと思っています。
ご教示の方よろしくお願いいたします。
lang
1 2$('.sortable1, .sortable2, .sortable3').sortable({ 3 connectWith: '.connected' 4 }); 5
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
tkturbo さんのコードを参考と、DEMOページをこぴぺして作成しました。
ちゃんと動きましたよ。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #sortable1, #sortable2, #sortable3 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $('#sortable1').sortable({ connectWith: '#sortable3' }); $('#sortable2').sortable({ connectWith: '#sortable3' }); $('#sortable3').sortable({ connectWith: '#sortable1, #sortable2' }); }); </script> </head> <body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> <ul id="sortable3" class="connectedSortable"> <li class="ui-state-hover">Item 1</li> <li class="ui-state-hover">Item 2</li> <li class="ui-state-hover">Item 3</li> <li class="ui-state-hover">Item 4</li> <li class="ui-state-hover">Item 5</li> </ul> </body> </html>
投稿2016/03/07 08:50
総合スコア312
0
ベストアンサー
つまり、
・1からは3だけに行く
・2からは3だけに行く
・3からは1と2に行ける
ですかね。
だったら
$('.sortable1').sortable({ connectWith: '.sortable3' }); $('.sortable2').sortable({ connectWith: '.sortable3' }); $('.sortable3').sortable({ connectWith: '.sortable1, .sortable2' });
これじゃだめですか?
投稿2016/03/04 09:15
総合スコア5572
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
すみません....解決したと思ったのですが一部動かなかったです...
・3からは1と2に行ける
上記ができなかったです(泣)
2016/03/04 09:40
じゃあ3は「$('.sortable3').sortable({ connectWith: '.connected' });」でどうでしょう?
2016/03/04 10:22
申し訳ないです....
3をこれにすると1と2も行き来できるようになってしまい3は行けない仕様になってしまいました
2016/03/04 10:51
おそらく123ともに「connected」をクラスに指定してるとおもぃすが、3からそのクラス指定を外してみてください
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。