• 締切済み

jquery sortableについて

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();

みんなの回答

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.3

$("#list1, #list2").sorable({ items:":not(.disable)", connectWith:".sort" }); connectWith:".sort"のsortにドットを付けるのを忘れてました。 しかし、この方法だとアイテム2を動かすと1と3の間には 挿入することができなくなりますね。 1の前に挿入することもできませんね。

bgbwq712
質問者

お礼

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

  • ONEONE
  • ベストアンサー率48% (279/575)
回答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" }); 試してませんがこんな感じかと思います。

bgbwq712
質問者

補足

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

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

itemsオプションで対象のものだけを指定出来ます。 connectWithオプションで複数のリストにまたがってドラッグできます。 クラスを追加するなりすれば良いかと思います。 http://log.noiretaya.com/186 http://alphasis.info/2011/06/jquery-ui-sortable-connectwith/

bgbwq712
質問者

補足

間違っていたらすみません、回答して頂いた内容ですが「アイテム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

  • jqueryのsortableで一部ソート禁止に

    jqueryのsortableでは親の要素を指定すると、その子供がソート可能になるとおもいますが。 一部ソート禁止にしたいのですがどのようにして実現させればよいのでしょうか $('#sortarea ul').sortable(); <ul> <li>ソート可能</li> <li>ソート可能</li> <li>ソート可能</li> </ul> stopクラスなどを指定するとソート禁止にしたい <ul> <li class="stop">ソート禁止</li> <li>ソート可能</li> <li>ソート可能</li> </ul> 上記例の場合はソート禁止が一番上なので 一番上をulから外してしまえばよいですが 縦長になって途中でも出てくる可能性があるので 「stopで動かさない」という動きを実現させたいです 分かる方お教え頂けると嬉しいです

  • JavascriptからPHPに値を受け渡したい

    度々お世話になってます。 ドラッグ&ドロップによるリスト間の並び替え結果の反映方法で悩んでいます。 <ul id=xxx><li id=x_1><li id=x_2>…</li><ul> <ul id=yyy><li id=y_1><li id=y_2>…</li><ul> という複数のリスト間をSortable.createを使用して動かしています。 この<ul>のidを取り出してPHPに送りたいのですが、なかなか上手くいきません。 <? $_SESSION["X"] = Sortable.serialize('xxx'); ?> 上記のようなプログラム等で試していますが、うんともすんとも言いません。 ご教授頂ければ幸いです。 よろしくお願いします。

    • 締切済み
    • PHP
  • sortable ギブアップです…助けてください!

    お世話になっております。 もぅどうしようもなくてギブです。 御存じの方、お助けください。 Jqueryの【UI sortable】でドラッグ&ドロップで並べ替え。 その並び順をDBに保存したいと考えています。 ●ドラッグで並べ替えは出来ました! ●DBに保存が出来ません…( T T ) 呼んでいるモノ------------------------------------------- <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script> javascriptの記述----------------------------------------- <script> $(function() { $(".sortable").sortable(); $(".sortable").disableSelection(); $("#submit").click(function() { var result = $(".sortable").sortable("toArray"); $("#result").val(result); $("form").submit(); }); }); </script> <script> <!-- $(function() { $( '#jquery-ui-sortable' ) . sortable({ cursor: 'move', opacity: 0.7, placeholder: 'ui-state-highlight', }); $( '#jquery-ui-sortable' ) . disableSelection(); }); // --> </script> ------------------------------------------------------ MySQL…5.0.8 PHP…5 MySQL------------------------------------ テーブル名 tablesort フィールド 【id】…INT ・ AUTO_INCREMENT 【no】…varchar(11) 【name】…varchar(20) 【message】…TEXT 【file】…varchar(255) 【date】…datetime -------------------------------------    【表示しているコード】 下記でDBの画像を呼び出して並べ替えれるようになりました。 echo '<form action ="tablesort.php" method="POST" ><ul class="sortable">';//<li class="ui-state-default">'; //-------------------------------------------------------- // ↑ ソートテーブルスタート //-------------------------------------------------------- $my_Row = mysql_query("SELECT * FROM tablesort",$my_Con); if (!$my_Row){ die(mysql_error()); } while($row = mysql_fetch_array($my_Row)){ $so_no = $row["no"]; $so_file = $row["file"]; $so_id = $row["id"]; echo <<<EOT <li class="stb" id="$so_no"> <img src="../img/$so_file" width="75px" height="100px" > </li> EOT; } //--------------------------------------------------- // ↓ ソートテーブルの終了 //--------------------------------------------------- echo <<< EOP </ul><input type="hidden" id="result" name="result" /><button id="submit">submit</button></form> EOP; ここからが不明点です。 submit を押された時にDBに保存するPHPが不明なのです。 色んな事をしたので、どう書けばいいかご享受願いたいですm(_ _)m ↓↓↓ //-------------------------------------------------------- //並べ替えを保存 //-------------------------------------------------------- if (isset($_POST["submit"])){ $result = $_POST['result']; echo $result; $result_array = explode(',',$result); print_r($result_array); print_r(serialize($result_array)); mysql_query("UPDATE tablesort SET no=●●●● WHERE id=●●●●",$my_Con); header('Location: http://hp-sys.com/menu-5/tablesort.php'); } この●●●●の部分ってどうすれば良いのでしょうか?? それとも、もっと根本的な間違いでしょうか?? すみませんが宜しくお願いいたしますm(_ _)m

    • ベストアンサー
    • PHP
  • jQueryでリストを分割してページ送りを表示

    現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…? [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>

  • sortableを使用したデータのUPDATE

    お世話になります。 jQueryの「 sortable 」というプラグインを使用して、データベースから 「id」、「name」、「price」、「no」というデータをselectして、ブラウザで並び順を変更後に updateするという流れですが、最終的にシリアライズした配列をDBへupdateできません。 「id」は連番にしてユニークな値が入っていて、「no」には並び順の値が半角数字で入れてあります。 シリアライズした配列のデータは、ブラウザで確認すると問題ありません。 恐らくupdateの際のforeachの処理が上手く行ってないように感じますが、 正常に「id」と「no」の整合性を取ってDBに投げるには、どの様に組み立てたら良いのでしょうか? 以下が主要箇所のソースです。 ------------------------------------------------------- <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.3.custom.js"></script> <script> $(function() { $(".sortable").sortable(); $(".sortable").disableSelection(); $("#submit").click(function() { var result = $(".sortable").sortable("toArray"); $("#result").val(result); $("form").submit(); }); }); </script> <form action="index.php" method="post"> <ul class="sortable"> <?php // DB接続 include "db_pdo_conn.php"; $sql1 = "SELECT id, name, price, no FROM sortable ORDER BY no"; $stmt = $conn->prepare($sql1); $stmt->execute(); foreach ($stmt as $row) { $id = $row["id"]; $name = $row["name"]; $price = $row["price"]; $no = $row["no"]; echo <<<li <li class="ns" id="$id">{$name} {$price} {$no}</li> li; } $result = $_POST['result']; $result_array = explode(',', $result); //シリアライズした$result_arrayを表示 print_r(serialize($result_array)); //データが送信されたときに変更する if (count($_POST)) { //nomを「 1 」から振り替える $nom = 1; foreach ($result_array as $id){ $nom++; $sql2 = "UPDATE sortable SET no='$nom' WHERE id='$id'"; $stmt = $conn->prepare($sql2); $stmt->execute(array($no_comp, $id_comp)); } } ?> </ul> <input type="hidden" id="result" name="result" /> <button id="submit">submit</button> </form> ------------------------------------------------------- 3日程試行錯誤しておりますが、解決できる糸口が見つからないので ご存知の方がいらっしゃいましたら、ご教示の程どうぞよろしくお願い申し上げます。 ---------------- ▼スペック PHP 5.3.3 MySQL 5.0.95 ----------------

    • ベストアンサー
    • PHP
  • jQueryの要素選択について

    例えば、 <ul id="list"> <li style="width: 100px;">リスト1</li> <li style="width: 200px;">リスト2</li> <li style="width: 300px;">リスト3</li> </ul> というHTMLの、liのwidthの合計をjQueryを使って求めるには、どうすれば良いでしょうか? for( prop in $("ul#list li") ) { width_sum += prop.width(); } こんな感じだと思っていたのですが・・・うまくいきません。 Javascript初心者です。 「その前に○○を勉強した方がいいよ」などのアドバイスはお控えいただいて、純粋に解答のみを教えていただければ幸いです。 よろしくお願いいたします。

  • 2種類のリスト項目をjQueryを使って揃えたい

    スマートフォンサイト制作中です。 やりたい事は 横並びにしている2種類のリスト項目数を jQueryを使って、揃えたいって事です。 以下のようなリストがあって、 2種類のulを横並びにしています。 (2列のテーブルみたいな感じ) <ul class="column1"> <li>あいう</li> <li>かきく</li> <li>さしす</li> </ul> <ul class="column2"> <li>アイウ</li> <li>カキク</li> <li>サシス</li> <li>タチツ</li> </ul> 例として、上記の場合、class="column2"の方が<li>が一つ多いので それに合わせてclass="column1"に<li>を追加して(追加した要素の中身はブランクで)、 横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。 考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得して そのエレメント数を比較して、大きい個数に合わせて、 足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな?? …って思っているのですが どのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。 現行のPCサイトのHTMLをいじらずに スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。 どなたか詳しい方、どうかご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • jqueryのsortableで行き来自由に

    お世話になります jqueryのsortableでconnectWithを使うことで 別のエリアにソートが可能になりますが すべての要素を別の要素に移動した場合 もとの場所に戻すことが不可能になってしまいます これを可能にするにはどうしたらいいのでしょうか 例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable"> <!-- エリア A 始まり --> <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル エリアA(ここは動かしたくない)</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table> <!-- エリア A 終わり --> <!-- エリア B 始まり --> <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル エリアB(ここは動かしたくない)</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table> <!-- エリア B 終わり --> </div> </body> </html> 対策方法御存知の方 お助け下さいませ!

  • jQueryでヒアドキュメントを使いたいのですが

    ・下記みたいなことをやりたいのですが、改行をエスケープしないとうまくいきません ・後で見て分かりやすいよう、書き変えるhtmlを整形状態のままコーディングしたいのですが、どうすればよいでしょうか? $("div#hoge").html(" <div id='top-category-list' class='section-lv2'>   <h2><a href='/category/list/'>カテゴリ一覧</a></h2>   <ul class='category'>       <li><a href="/category/214/">ライフ</a></li>       <li><a href="/category/207/">デジタルライフ</a></li>       <li><a href="/category/212/">趣味</a></li>      </ul>  </div> ");

  • jQueryオブジェクトに対する変更

    jQueryオブジェクトに対する変更は可能? ちょっと特殊!?なのかもしれませんが、下記の内容が実現できるかどうかを検証しております。 悩んでいるポイントは「← ココ」の部分です。 良いアイデアをお持ちの方、是非御教示願い申し上げます。 <サンプルHTML> <p id="hogehoge"> <ul> <li>aaaaaa</li> <li>bbbbbb</li> </ul> <div id="foo"><strong>cccccc</strong></div> </p> <実現したい事>============ var html_obj = $("p#hogehoge").clone(); // 特定のpタグを含むhtmlコードをオブジェクト化 // html_objに含まれる<ul>タグの内容を変更  ← ココ // html_objに含まれる<div>タグの内容を変更  ← ココ return html_obj // 関数の戻り値としてhtml_objを戻す。 ==================== <欲しい結果> <p id="hogehoge"> <ul> <li>zzzzzz</li> <li>xxxxxx</li> </ul> <div id="foo"><strong>yyyyyy</strong></div> </p>