
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ランキング
-
javascriptでフォーカスを当て...
-
【jQuery】hoverしたn秒後にイ...
-
jqueryのsortableで一部ソート...
-
メニューのリンクをクリックし...
-
同一ページ内で、任意の文字列...
-
「jQuery」アコーディオンメニ...
-
大量のチェックボックス状態取...
-
SleniumBasicでコンパイルエラ...
-
javascriptでEnterキーをtabキ...
-
DOM の 要素の数え方について
-
クリックで表示、非表示するメ...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
同一ページ内で、任意の文字列...
-
タブ切り替えの初期表示について
-
ネストされたチェックボックス...
-
JQueryタブのアクティブ アン...
-
Jquery の slide.toggle で要素...
-
ホームページビルダー17のフ...
-
【javascript で動的に a タグ...
-
javascriptで正規表現の検索が...
-
JavascriptのDOMについて
-
javascript テキストエリアを1...
-
for(var i=0;...) の i の値を...
-
クリックで表示、非表示するメ...
-
jQueryで電卓を作っているのですが
-
js ライブラリ iscrollの利用に...
-
jquery ドロップダウンメニュー...
-
プルダウンのメニュー表示について
-
jQueryのhide,showで中の要素が...
-
gridstack.jsについて教えてく...
-
【HP制作】メールフォームの設...
おすすめ情報