ショボ短歌会

2つのsortable要素があり、リスト1の特定の要素のみリスト2に移動できるようにできないでしょうか?
下記のlist1のアイテム2のみlist2へ移動でき、アイテム1・アイテム3はlist1内でソートのみ。

<ul id="list1">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>

<ul id="list2">
<li>アイテム4</li>
<li>アイテム5</li>
<li>アイテム6</li>
</ul>

$("#list1").sorable();
$("#list2").sorable();

A 回答 (3件)

$("#list1, #list2").sorable({


items:":not(.disable)",
connectWith:".sort"
});

connectWith:".sort"のsortにドットを付けるのを忘れてました。
しかし、この方法だとアイテム2を動かすと1と3の間には
挿入することができなくなりますね。
1の前に挿入することもできませんね。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!
そうですね、そこができる方法を知りたいです。
draggableを利用してどうにかできないものですかね。

お礼日時:2014/08/07 00:14

<ul id="list1" class="sort">


<li class="disable">アイテム1</li>
<li>アイテム2</li>
<li class="disable">アイテム3</li>
</ul>

<ul id="list2" class="sort">
<li>アイテム4</li>
<li>アイテム5</li>
<li>アイテム6</li>
</ul>

$("#list1, #list2").sorable({
items:":not(.disable)",
connectWith:"sort"
});

試してませんがこんな感じかと思います。

この回答への補足

回答して頂いた内容ですが以前の内容と同様で「アイテム2」をリスト2へ移動する事はできますが、リスト1内で「アイテム1、アイテム2、アイテム3」の並び替えができない状況です。

補足日時:2014/07/25 13:55
    • good
    • 0

itemsオプションで対象のものだけを指定出来ます。


connectWithオプションで複数のリストにまたがってドラッグできます。
クラスを追加するなりすれば良いかと思います。

http://log.noiretaya.com/186
http://alphasis.info/2011/06/jquery-ui-sortable- …

この回答への補足

間違っていたらすみません、回答して頂いた内容ですが「アイテム2」をリスト2へ移動する事はできますが、リスト1内で「アイテム1、アイテム2、アイテム3」の並び替えができなくなりました。オプションの付け方などで実装できるものでしょうか?

<ul id="list1">
<li>アイテム1</li>
<li class="sortable-item">アイテム2</li>
<li>アイテム3</li>
</ul>

<ul id="list2">
<li>アイテム4</li>
<li>アイテム5</li>
<li>アイテム6</li>
</ul>

$("#list1").sortable({
items: '.sortable-item',
connectWith: '#list2'
});


$("#list2").sortable({
});

補足日時:2014/07/23 09:31
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!