[jQueryUI Sortable] connectWithを使ってクラス名の違う3リスト間を移動できるようにしたい

Question

結論から言うと、

jQueryUIのSortableにおいて、connectWithを使ってクラス名の違う3リスト間をバーが移動できるようにするにはどうしたらいいでしょうか？

現在jQueryUIのSortableを使って3つのリストを移動させる画面を作っています。

↓画面
![イメージ説明]WIDTH:600

画面自体はできあがっていて、後は機能だけです。

下記のようにクラス名を同じにして移動できるのは知っています。

	<ul class="jquery-ui-sortable">
		<h3>やることリスト</h3>
		<li id="item_1" class="ui-state-default border-color-red">項目 1</li>
		<li id="item_2" class="ui-state-default border-color-red">項目 2</li>
		<li id="item_3" class="ui-state-default border-color-red">項目 3</li>
	</ul>
	<ul class="jquery-ui-sortable">
		<h3>実施中</h3>
		<li id="item_4" class="ui-state-default border-color-blue">項目 4</li>
		<li id="item_5" class="ui-state-default border-color-blue">項目 5</li>
		<li id="item_6" class="ui-state-default border-color-blue">項目 6</li>
	</ul>
	<ul class="jquery-ui-sortable">
		<h3>完了</h3>
		<li id="item_7" class="ui-state-default border-color-green">項目 7</li>
		<li id="item_8" class="ui-state-default border-color-green">項目 8</li>
		<li id="item_9" class="ui-state-default border-color-green">項目 9</li>
	</ul>
	<div style="clear: both;"></div>

	<script>
		$(function() {
			$('.jquery-ui-sortable').sortable({
				connectWith : '.jquery-ui-sortable'
			});
		});
	</script>

ただ他との関係もあってクラス名を変えたいと思っています。
しかし今のやり方では一部バーの移動ができないところが出てきます
他にもいろいろ試しました。
connectWithに複数要素を指定する方法がわかれば解決できる気がします。
もしわかる方がいれば教えて頂けるとうれしいです。

↓現状

  <ul class="jquery-ui-sortable">
		<h3>やることリスト</h3>
		<li id="item_1" class="ui-state-default border-color-red">項目 1</li>
		<li id="item_2" class="ui-state-default border-color-red">項目 2</li>
		<li id="item_3" class="ui-state-default border-color-red">項目 3</li>
	</ul>
	<ul class="jquery-ui-sortable2">
	<h3>実施中</h3>
		<li id="item_4" class="ui-state-default border-color-blue">項目 4</li>
		<li id="item_5" class="ui-state-default border-color-blue">項目 5</li>
		<li id="item_6" class="ui-state-default border-color-blue">項目 6</li>
	</ul>
	<ul class="jquery-ui-sortable3">
		<h3>完了</h3>
		<li id="item_7" class="ui-state-default border-color-green">項目 7</li>
		<li id="item_8" class="ui-state-default border-color-green">項目 8</li>
		<li id="item_9" class="ui-state-default border-color-green">項目 9</li>
	</ul>
  <script>
		$(function() {
			$('.jquery-ui-sortable').sortable({ 
				connectWith : '.jquery-ui-sortable2'
			});
		});
		$(function() {
			$('.jquery-ui-sortable').sortable({ 
				connectWith : '.jquery-ui-sortable3' 
			});
		});
		$(function() {
			$('.jquery-ui-sortable2').sortable({ 
				connectWith : '.jquery-ui-sortable' 
			});
		});
		$(function() {
			$('.jquery-ui-sortable2').sortable({ 
				connectWith : '.jquery-ui-sortable3' 
			});
		});
		$(function() {
			$('.jquery-ui-sortable3').sortable({ 
				connectWith : '.jquery-ui-sortable' 
			});
		});
		$(function() {
			$('.jquery-ui-sortable3').sortable({ 
				connectWith : '.jquery-ui-sortable2' 
			});
		});
	</script>

Answer 1

おっしゃりたい事がよくわからないんですが、こういうことでしょうか？

    <ul id="sortable1" class="jquery-ui-sortable">
        <h3>やることリスト</h3>
        <li id="item_1" class="ui-state-default border-color-red">項目 1</li>
        <li id="item_2" class="ui-state-default border-color-red">項目 2</li>
        <li id="item_3" class="ui-state-default border-color-red">項目 3</li>
    </ul>
    <ul id="sortable2" class="jquery-ui-sortable">
    <h3>実施中</h3>
        <li id="item_4" class="ui-state-default border-color-blue">項目 4</li>
        <li id="item_5" class="ui-state-default border-color-blue">項目 5</li>
        <li id="item_6" class="ui-state-default border-color-blue">項目 6</li>
    </ul>
    <ul id="sortable3" class="jquery-ui-sortable">
        <h3>完了</h3>
        <li id="item_7" class="ui-state-default border-color-green">項目 7</li>
        <li id="item_8" class="ui-state-default border-color-green">項目 8</li>
        <li id="item_9" class="ui-state-default border-color-green">項目 9</li>
    </ul>
    <script>
        $(function() {
            $('#sortable1').sortable({ connectWith : ['#sortable2', '#sortable3']});
            $('#sortable2').sortable({ connectWith : ['#sortable3', '#sortable1']});
            $('#sortable3').sortable({ connectWith : ['#sortable1', '#sortable2']});
        });
    </script>

※訂正しました。

ただ他との関係もあってクラス名を変えたいと思っています。

クラス名を変えたい理由がよくわかりませんが、何か勘違いをされている気がします。

Comments

[退会済みユーザー]

ああ、なるほどなんとなく分かってきたような…

[退会済みユーザー]

分かりましたので訂正しました。

クラス名を変えたい理由について、差し支えなければ教えていただけませんか？
多分勘違いされていると思います。

[k499778]

luckerさん遅くなりました。すいません。
そして、ありがとうございます！
コードも載せたく、また長くなりそうなので
コメント外に詳細を書きます。

Answer 2

luckerさん　2015/04/21 11:00

へぇーーーー！！！知らなかった！！
そうなんですね！目から鱗です。

それはだいぶ便利ですね！
確かにそれだと、一番上のコードの

<script>
        $(function() {
            $('.jquery-ui-sortable').sortable({
                connectWith : '.jquery-ui-sortable'
            });
        });
</script>

の書き方のまま、クラス別に条件分岐もできそうですね。

確かに他に何か方法があるかなと思って調べてはいたのですが
その発想がなかったのと、その資料を見つけることができませんでした。

一応前のluckerさんの回答で私の問題は解決したのですが、それも試してみたいと思います。
コード量を抑えられそう。ｷﾗｰﾝ( • ω• )✧
わざわざ教えて下さってありがとうございます！

Answer 3

luckerさん、できました！！
ありがとうございます！
現状コードのscriptタグの部分を変えました。

<script>
$(function() {
	            $('.jquery-ui-sortable').sortable({ connectWith : ['.jquery-ui-sortable2', '.jquery-ui-sortable3']});
	            $('.jquery-ui-sortable2').sortable({ connectWith : ['.jquery-ui-sortable3', '.jquery-ui-sortable']});
	            $('.jquery-ui-sortable3').sortable({ connectWith : ['.jquery-ui-sortable', '.jquery-ui-sortable2']});
	        });
</script>

そうですね。少し意図が伝わってなかったようなので補足します。

まずそういう認識をしてくださっているかわかりませんが、
「クラス名を変えたい」という表現は、
「一番上のコードのように3リストとも同じクラス名にするのではなくて、
3リストとも違うクラス名にしたい。違うクラス名に変えたい」
というニュアンスです。

そしてなぜ変えたかったかというと、
上記以外に「ソート後リストごとに値をそれぞれのDBのテーブルに保存する」という実装をしています。
そのためにクラス名で条件分岐をして、パラメータの飛ばし方を変えたりしています。
なのでクラス名は他の実装で多く使っているので3つとも違うクラス名のまま、
リスト間でバーを移動させる方法が知りたかったということです。

あまりに細かく、なおかつ多くの情報で混乱させ、質問の本質が見えなくなる恐れがあると思い、
とりあえず「3つのクラス名を違う名前にしたい」ということだけ伝えようと思いました。
その結果上記のような表現にしました。

ただ私の意図していた回答を得ることができました。
ありがとうございます。luckerさんには感謝しています。

Comments

[退会済みユーザー]

解決されているようなので余計かもしれませんが、
クラス名は複数指定できますので、最初の質問の状態でしたら、
<ul class="jquery-ui-sortable other_classname1">
のように追加すれば、現状のコードを変えなくても対応できるなと思った次第です。

W3C
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

[k499778]

コード載せたいのでコメ外に書きます。