
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件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
$("#list1, #list2").sorable({
items:":not(.disable)",
connectWith:".sort"
});
connectWith:".sort"のsortにドットを付けるのを忘れてました。
しかし、この方法だとアイテム2を動かすと1と3の間には
挿入することができなくなりますね。
1の前に挿入することもできませんね。
ご回答ありがとうございます!
そうですね、そこができる方法を知りたいです。
draggableを利用してどうにかできないものですかね。
No.2
- 回答日時:
<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:55No.1
- 回答日時:
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({
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS display flex の使い方 1 2022/04/25 19:13
- その他(プログラミング・Web制作) pythonリストの特定の値を表示htmlで表示できない 2 2022/05/14 05:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FireFoxのjavascriptでonloadで...
-
複数のラジオボタン項目でのテ...
-
jQueryのeqで最後からn番目以降...
-
タブレットのドロップダウンメ...
-
jQuery appendの中身の出力につ...
-
アコーディオンメニューの開閉制御
-
jQueryで電卓を作っているのですが
-
jquery中のmatch関数が正常に動...
-
クリックした<a>タグのみにClas...
-
jQuery タブコンテナを複数配置
-
jQueryの重複クリック回避につ...
-
縦スクロールの表示位置によるDOM
-
Jqueryのイベントが動かないケ...
-
背景色をAB,ACというように設定...
-
Jquery タブで、4つのliのうち...
-
jQuery タブメニューへのダイ...
-
innerHTMLでドロップダウンメニ...
-
javascriptで教えてください。 ...
-
【短い】1つだけ展開/表示/非表...
-
jcarouselliteについてです。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
タブ切り替えの初期表示について
-
クリックした<a>タグのみにClas...
-
【javascript で動的に a タグ...
-
JQueryタブのアクティブ アン...
-
jQueryのhide,showで中の要素が...
-
JS <a></a>タグ内のリンク先ア...
-
javascriptで教えてください。 ...
-
ネストされたチェックボックス...
-
div要素をランダムに表示させたい
-
jquery ドロップダウンメニュー...
-
同一ページ内で、任意の文字列...
-
onMouseoutの有効な範囲
-
macromediaのようなメニュー
-
mootoolsを使ったドロップダウ...
-
tableやul,liで表示されたリス...
-
jQueryのeqで最後からn番目以降...
-
javascript, getElementsByTagN...
-
jQuery タブメニューへのダイ...
-
【jQuery】遅延実行(タイムラ...
おすすめ情報