SortableJSでドラッグ＆ドロップの使い方

Kintone使ってワークフローを作るのが既に用意されたUIなど使うので便利です。しかし「あれどうやって実現しているのだろう？」と思い調べてみたら、SortableJSが良さげだったので。

こうやって古い頭の人は自作しようとしてメンテナンス問題を考えない負のスパイラルに陥りがちですが、「〇〇使えば作らなくても」となると、ますます技術が追い付かなくなっていくので汗

1. SortableJS導入
2. ソート出来るかドラッグ＆ドロップしてみる
3. 中にinputなどの要素があるとクリックしてもソートが優先して編集できない
4. ドラッグ出来るハンドルを付けて、ドラッグする箇所以外は選択、編集できるようにする
5. 送信するときに上から順にデータを拾えばOK
6. div,liだけでなくtableのtrもソート出来る
7.ドラッグ＆ドロップでコピーなども出来る

1. SortableJS導入

SortableJSを導入します。入れ物であるdiv id=”sortarea”内の子要素をソート出来るようにします。的なイメージです。


<div id="sortarea">
 <div class="border">aaaaaaa</div>
 <div class="border">bbbbbbb</div>
 <div class="border">ccccccc</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script type="text/javascript">
 new Sortable(sortarea,{
  animation: 150,
  ghostClass: 'ghost',
  chosenClass: 'light-green',
  delay; 100,
 });
</script>

GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. - GitHub - SortableJS/Sortable: Reorderable drag-and-dro...

2. ソート出来るかドラッグ＆ドロップしてみる

1で作成したソートエリア内の要素をドラッグ＆ドロップすると入れ替わると思います。
chosenClassでbackground-colorとか色を付けると、選択された要素が色変わったりするのでわかりやすいです。

3. 中にinputなどの要素があるとクリックしてもソートが優先して編集できない

１つにinput要素を入れてみましょう。
このままだと、inputではなく、div要素全体がドラッグ対象になっているので、inputをクリックして何か入力しようとしても出来ません。
こういう時は、ハンドルを指定してドラッグ出来る部分を全体ではなく、一部に絞ると良いです。

4. ドラッグ出来るハンドルを付けて、ドラッグする箇所以外は選択、編集できるようにする

３でinputを編集しようとしても出来ませんでした。
こういうパーツの場合は、ドラッグ出来るハンドルを決めてしまえばOKです。
まず、new Sortableで、handle: ‘.handle’,　とし、css handleクラスをハンドルとして扱います宣言します。

$(function(){
 
 new Sortable(sortarea,{
  handle: '.handle',
 });
});

次に、htmlのsortarea内のパーツに対して、handleクラスの要素を追加。今回はspanにしていますが、divでもなんでも良いです。


<div id=sortarea>
 <div class="list-group-item">
  <span class="handle">::</span>
  <input type="text" name="name" value="editable">
 </div>
 <div class="list-group-item">
  <span class="handle">::</span>
  <span>このパーツはテキストのみ</span>
 </div>

</div>

cssで.handleクラスにはマウスカーソルをわかりやすいように変更しても良いです


.handle {
  cursor: move;
  cursor: -webkit-grabbing;
}

こうすると、左側の::でのみソート出来るようになります。このほうが、中にinputあるときなど編集できるようになるので良いですね。

5. 送信するときに上から順にデータを拾えばOK

並べ替えたデータなんかは、上から順に拾っていけばOKですね。

function submitdata()
{
  let datalist = $('div#sortarea > div');
  for( let i=0; i<datalist.length; i++ ){
    //データ取得して
  }

  //送信
}

6. div,liだけでなくtableのtrもソート出来る

divやul > liだけでなく、tableのtrもソート出来ます。
ソータブルにしたい要素の親にidを指定すれば良いので、tbodyがあるなら、tbody、tableの子がtrならtableにidを付与してsortableすればOKです。

筆者は発注書のようなグリッドが必要だったので、tableのtbodyにidを付与してtrをソータブルにしたりしています。

7.ドラッグ＆ドロップでコピーなども出来る

例えば、パーツエリアからドラッグ＆ドロップして、メインエリアに追加、その順序を変更するようなこともSortableJSで出来ます。ドラッグ＆ドロップ出来ないように、入れ子にするなどいろいろ出来るので、kintoneのようにUIを自分でカスタマイズなんてことも出来ますね。
ただ、それやろうとすると、設定の設計をしっかりやらないとですが・・