リファレンスのサンプル・コード参照。
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>