JavaScriptのライブラリ「SortableJS」を使えば
ドラッグ＆ドロップでリストの並び順を変えたりウィンドウの配置を入れ替えたり
といったUIをとても簡単に作ることができます。
デモ：
１．りんご
２．いちご
３．バナナ
４．スイカ
５．佐藤太郎
コード：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div id="sort_demo1"> <div style="background-color:#ffc0c0;">１．りんご</div> <div style="background-color:#ffffc0;">２．いちご</div> <div style="background-color:#c0ffc0;">３．バナナ</div> <div style="background-color:#c0ffff;">４．スイカ</div> <div style="background-color:#c0c0ff;">５．佐藤太郎</div> </div> <style> #sort_demo1 div { cursor: pointer; margin: 2px; } </style> <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script> <script> window.onload = function() { Sortable.create(sort_demo1, { sort: 1, group: { name: 'sort_demo1', pull: true, put: true }, animation: 150, onEnd: function(evt) { // ここで並び変えた状態を変数に保持したり、サーバーに送信したりする } }); } </script> |