Q&A
「table構造の複数ソート」とは「何」と「何」の複数なのでしょう？
###前提・実現したいこと
JQueryでsortableを用いてtable構造の複数ソートを作成しています。
selectableを使ってできないかなど試みておりますが、うまくいきません。
何とか解決できないものかと考えており、どうかご助力をお願いします。
宜しくお願い致します。
###該当のソースコード
【JQuery】 $('#ABC').sortable({ axis: 'y', handle: 'th,.daragSort', sort: function(event, ui) { $(ui.item).trigger('mouseover'); }, stop: function(event, ui ){ $(ui.item).trigger('mouseout'); } }); 【html】 <div id="ABC"> <table class="image mgn0"> <tbody> <tr> <th> <div> </div> <input> </th> <td> <div> </div> </td> </tr> </tbody> </table> </div> ※大まかにしてかけず申し訳ございません。 ※以下追記です。 <div> <table id="imageEdit" class="image mgn0"> <tbody> <? for($i = 1; $i <= $auth['ABC']['abc']; $i++): ?> <tr> <th> <div></div> <input type="hidden" name="num[]" value="<?= $i ?>" /> </th> <td> <div> <div> </div> <div> <span></span> <p> ここをクリックして<br> 個別で画像を<br> アップロード </p> </div> </div> </td> <td> <p></p> <div> <p></p> <div> <span></span> / 100文字 </div> </div> <div> <p> <span>画像編集</span> <button>画像を加工する</button> </p> </div> </td> </tr> <? endfor ?> </tbody> </table> </div> ※forで回して各trを表示させています。
###試したこと
selectableとsortableを併用したり、idを上位のdivにあててみたりと試みていますが、うまくいっておりません。
失礼いたしました。複数のtableを移動させて、並び順を変えるということです。
その複数がどういうHTML構造で配置されているかを書いてくれないと‥
回答3件
0
ベストアンサー
リファレンスのサンプル・コード参照。
http://js.studio-kingdom.com/jqueryui/interactions/sortable
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .sortable { 8 background-color: #F6F6F6; 9 padding: 1em; 10 margin-bottom: 1em; 11 } 12 table { 13 border-collapse: collapse; 14 margin-bottom: 1em; 15 width: 400px; 16 background-color: #fff; 17 } 18 table th, table td { 19 border: 1px solid #CCC; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="sortable"> 25 <table> 26 <tr> 27 <td>1</td> 28 <td>1</td> 29 <td>1</td> 30 </tr> 31 <tr> 32 <td>1</td> 33 <td>1</td> 34 <td>1</td> 35 </tr> 36 </table> 37 <table> 38 <tr> 39 <td>2</td> 40 <td>2</td> 41 <td>2</td> 42 </tr> 43 <tr> 44 <td>2</td> 45 <td>2</td> 46 <td>2</td> 47 </tr> 48 </table> 49 </div> 50 <div class="sortable"> 51 <table> 52 <tr> 53 <td>3</td> 54 <td>3</td> 55 <td>3</td> 56 </tr> 57 <tr> 58 <td>3</td> 59 <td>3</td> 60 <td>3</td> 61 </tr> 62 </table> 63 <table> 64 <tr> 65 <td>4</td> 66 <td>4</td> 67 <td>4</td> 68 </tr> 69 <tr> 70 <td>4</td> 71 <td>4</td> 72 <td>4</td> 73 </tr> 74 </table> 75 </div> 76 <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 77 <script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 78 <script type="text/javascript"> 79 $(function () { 80 $('.sortable').sortable(); 81 }); 82 </script> 83 </body> 84</html>
#何がやりたいのかやっとわかったので、
参考: http://code.agnist.jp/ui/1298
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .sortable { 8 background-color: #F6F6F6; 9 padding: 1em; 10 margin-bottom: 1em; 11 } 12 table { 13 border-collapse: collapse; 14 margin-bottom: 1em; 15 width: 400px; 16 background-color: #fff; 17 } 18 table th, table td { 19 border: 1px solid #CCC; 20 } 21 .ui-selecting { 22 background-color: #eee; 23 } 24 .ui-selected { 25 background-color: #999; 26 color: #fff; 27 cursor: n-resize; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="sortable"> 33 <table> 34 <tr> 35 <td>1</td> 36 <td>1</td> 37 <td>1</td> 38 </tr> 39 <tr> 40 <td>1</td> 41 <td>1</td> 42 <td>1</td> 43 </tr> 44 </table> 45 <table> 46 <tr> 47 <td>2</td> 48 <td>2</td> 49 <td>2</td> 50 </tr> 51 <tr> 52 <td>2</td> 53 <td>2</td> 54 <td>2</td> 55 </tr> 56 </table> 57 <table> 58 <tr> 59 <td>3</td> 60 <td>3</td> 61 <td>3</td> 62 </tr> 63 <tr> 64 <td>3</td> 65 <td>3</td> 66 <td>3</td> 67 </tr> 68 </table> 69 <table> 70 <tr> 71 <td>4</td> 72 <td>4</td> 73 <td>4</td> 74 </tr> 75 <tr> 76 <td>4</td> 77 <td>4</td> 78 <td>4</td> 79 </tr> 80 </table> 81 <table> 82 <tr> 83 <td>5</td> 84 <td>5</td> 85 <td>5</td> 86 </tr> 87 <tr> 88 <td>5</td> 89 <td>5</td> 90 <td>5</td> 91 </tr> 92 </table> 93 </div> 94 <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 95 <script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 96 <script type="text/javascript"> 97 $(function () { 98 $('.sortable').selectable({ 99 cancel: '.sort-handle, .ui-selected', 100 filter: '> table' 101 }).sortable({ 102 helper: function (e, item) { 103 if (!item.hasClass('ui-selected')) { 104 item.parent().children('.ui-selected').removeClass('ui-selected'); 105 item.addClass('ui-selected'); 106 } 107 var selected = item.parent().children('.ui-selected').clone(); 108 ph = item.outerHeight() * selected.length; 109 item.data('multidrag', selected).siblings('.ui-selected').remove(); 110 return $('<table/>').append(selected); 111 }, 112 start: function (e, ui) { 113 ui.placeholder.css({'height': ph}); 114 }, 115 stop: function (e, ui) { 116 var selected = ui.item.data('multidrag'); 117 ui.item.after(selected); 118 ui.item.remove(); 119 } 120 }); 121 }); 122 </script> 123 </body> 124</html>
投稿2017/03/06 16:35
編集2017/03/06 17:44退会済みユーザー
総合スコア0
ご回答ありがとうございます。
ただ、大変申し訳ございませんが、tableタグ一つでしたら問題なく動きます。
状況といたしましては、縦に並んでいるtableタグが複数あり、その内の任意のテーブルをクリックで複数選択し、選択したテーブルをマウスドラッグして並び順を変えたい、というのは私の希望になります。
説明がわかりにくく大変申し訳ございません。
だからtable複数書いてあるじゃない？わざわざ4つも書いてあるというのに。
やりたいことがやっとわかったのでコードを追加しておきました。
ご回答ありがとうございます。
書いてくださったソースコードで成功いたしました。
ただ、「insertBefore」が「null」というバグがでておりますので、現在そのバグを回収しているところになります。
0
ご希望のUIは、jquery ui 単体ではたぶん無理だと思います。
"複数の"を調べるときは"multiple"とつけてGoogle先生にきくのがベターです。
"jquery sortable multiple" で調べてヒットした記事を紹介します。
Stack Overflow：jQuery Sortable - Select and Drag Multiple List Items
回答中にあるデモ：Demo
デモのが希望のものだと思うのでご確認いただけますか？
投稿2017/03/07 01:47
総合スコア200
0
うーん、ちょっと試しましたが問題なく動きますね。
Chromeのdeveloper toolや、IEの開発者モードなどのコンソールタブで
エラーが出ていないか確認してみてもらえますか？
html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 2<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 4<div id="ABC"> 5 <table class="image mgn0"> 6 <tbody> 7 <tr> 8 <th> 9 <div>aa 10 </div><input> 11 </th> 12 <td> 13 <div>bb 14 </div> 15 </td> 16 </tr> 17 </tbody> 18 </table> 19 <table class="image mgn0"> 20 <tbody> 21 <tr> 22 <th> 23 <div>cc 24 </div><input> 25 </th> 26 <td> 27 <div>dd 28 </div> 29 </td> 30 </tr> 31 </tbody> 32 </table> 33</div> 34 35 36<script type="text/javascript"> 37$('#ABC').sortable({ 38 axis: 'y', 39 handle: 'th,.daragSort', 40 sort: function(event, ui) 41 { 42 $(ui.item).trigger('mouseover'); 43 }, 44 stop: function(event, ui ){ 45 $(ui.item).trigger('mouseout'); 46 } 47}); 48</script>
投稿2017/03/06 12:19
総合スコア200
ご回答ありがとうございます。
一つを選択した状態では問題なく動きますが、これをもとに複数を同時に動かしたいのです。
ご教授いただけないでしょうか？
なるほどー。では
”複数を同時に動かす”のイメージを一致させるのが先決ですね。
まず、複数のテーブルとはどんなものでしょうか。
複数といっても、横に並んでいるのか、縦に並んでいるのか、
入れ子になっているのかので違うので、構造を教えていただけますか？
次にどういう操作で、どの部分をどう動かしたいのかを教えてください。
ご質問や回答からすると
縦に並んでいるtableタグが複数あり、
その内の任意のテーブルをクリックで複数選択し、
選択したテーブルをマウスドラッグして並び順を変えたい
ということかなと推測してみたんですが合っていますか？
clickermakerさん
仰る通りです。
複数のテーブルタグを動かそうとしております。
回答を追加しました。ご確認お願いします。
遅くなり申し訳ございません。
回答ありがとうございます。
確認させていただきましたが、他の方が出してくださった内容で一応動きとして出すことはできました。
ただバグがあり、そこの改修を行っている次第になります。
ありがとうございます。
あなたの回答
tips
プレビュー
