回答編集履歴

2

追記

2017/03/06 17:44

投稿

退会済みユーザー
test CHANGED
@@ -184,6 +184,10 @@
184
184
 
185
185
 
186
186
 
187
+ 参考: [http://code.agnist.jp/ui/1298](http://code.agnist.jp/ui/1298)
188
+
189
+
190
+
187
191
  ```html
188
192
 
189
193
  <!DOCTYPE HTML>

1

追記

2017/03/06 17:44

投稿

退会済みユーザー
test CHANGED
@@ -175,3 +175,263 @@
175
175
  </html>
176
176
 
177
177
  ```
178
+
179
+ ---
180
+
181
+
182
+
183
+ #何がやりたいのかやっとわかったので、
184
+
185
+
186
+
187
+ ```html
188
+
189
+ <!DOCTYPE HTML>
190
+
191
+ <html lang="ja">
192
+
193
+ <head>
194
+
195
+ <meta charset="UTF-8">
196
+
197
+ <title></title>
198
+
199
+ <style type="text/css">
200
+
201
+ .sortable {
202
+
203
+ background-color: #F6F6F6;
204
+
205
+ padding: 1em;
206
+
207
+ margin-bottom: 1em;
208
+
209
+ }
210
+
211
+ table {
212
+
213
+ border-collapse: collapse;
214
+
215
+ margin-bottom: 1em;
216
+
217
+ width: 400px;
218
+
219
+ background-color: #fff;
220
+
221
+ }
222
+
223
+ table th, table td {
224
+
225
+ border: 1px solid #CCC;
226
+
227
+ }
228
+
229
+ .ui-selecting {
230
+
231
+ background-color: #eee;
232
+
233
+ }
234
+
235
+ .ui-selected {
236
+
237
+ background-color: #999;
238
+
239
+ color: #fff;
240
+
241
+ cursor: n-resize;
242
+
243
+ }
244
+
245
+ </style>
246
+
247
+ </head>
248
+
249
+ <body>
250
+
251
+ <div class="sortable">
252
+
253
+ <table>
254
+
255
+ <tr>
256
+
257
+ <td>1</td>
258
+
259
+ <td>1</td>
260
+
261
+ <td>1</td>
262
+
263
+ </tr>
264
+
265
+ <tr>
266
+
267
+ <td>1</td>
268
+
269
+ <td>1</td>
270
+
271
+ <td>1</td>
272
+
273
+ </tr>
274
+
275
+ </table>
276
+
277
+ <table>
278
+
279
+ <tr>
280
+
281
+ <td>2</td>
282
+
283
+ <td>2</td>
284
+
285
+ <td>2</td>
286
+
287
+ </tr>
288
+
289
+ <tr>
290
+
291
+ <td>2</td>
292
+
293
+ <td>2</td>
294
+
295
+ <td>2</td>
296
+
297
+ </tr>
298
+
299
+ </table>
300
+
301
+ <table>
302
+
303
+ <tr>
304
+
305
+ <td>3</td>
306
+
307
+ <td>3</td>
308
+
309
+ <td>3</td>
310
+
311
+ </tr>
312
+
313
+ <tr>
314
+
315
+ <td>3</td>
316
+
317
+ <td>3</td>
318
+
319
+ <td>3</td>
320
+
321
+ </tr>
322
+
323
+ </table>
324
+
325
+ <table>
326
+
327
+ <tr>
328
+
329
+ <td>4</td>
330
+
331
+ <td>4</td>
332
+
333
+ <td>4</td>
334
+
335
+ </tr>
336
+
337
+ <tr>
338
+
339
+ <td>4</td>
340
+
341
+ <td>4</td>
342
+
343
+ <td>4</td>
344
+
345
+ </tr>
346
+
347
+ </table>
348
+
349
+ <table>
350
+
351
+ <tr>
352
+
353
+ <td>5</td>
354
+
355
+ <td>5</td>
356
+
357
+ <td>5</td>
358
+
359
+ </tr>
360
+
361
+ <tr>
362
+
363
+ <td>5</td>
364
+
365
+ <td>5</td>
366
+
367
+ <td>5</td>
368
+
369
+ </tr>
370
+
371
+ </table>
372
+
373
+ </div>
374
+
375
+ <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
376
+
377
+ <script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
378
+
379
+ <script type="text/javascript">
380
+
381
+ $(function () {
382
+
383
+ $('.sortable').selectable({
384
+
385
+ cancel: '.sort-handle, .ui-selected',
386
+
387
+ filter: '> table'
388
+
389
+ }).sortable({
390
+
391
+ helper: function (e, item) {
392
+
393
+ if (!item.hasClass('ui-selected')) {
394
+
395
+ item.parent().children('.ui-selected').removeClass('ui-selected');
396
+
397
+ item.addClass('ui-selected');
398
+
399
+ }
400
+
401
+ var selected = item.parent().children('.ui-selected').clone();
402
+
403
+ ph = item.outerHeight() * selected.length;
404
+
405
+ item.data('multidrag', selected).siblings('.ui-selected').remove();
406
+
407
+ return $('<table/>').append(selected);
408
+
409
+ },
410
+
411
+ start: function (e, ui) {
412
+
413
+ ui.placeholder.css({'height': ph});
414
+
415
+ },
416
+
417
+ stop: function (e, ui) {
418
+
419
+ var selected = ui.item.data('multidrag');
420
+
421
+ ui.item.after(selected);
422
+
423
+ ui.item.remove();
424
+
425
+ }
426
+
427
+ });
428
+
429
+ });
430
+
431
+ </script>
432
+
433
+ </body>
434
+
435
+ </html>
436
+
437
+ ```