touchデバイスでもドラッグ＆ドロップでsortableしたい #JavaScript

npmインストール

npm i sortablejs

使い方

<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

var el = document.getElementById('items');
var sortable = Sortable.create(el);

ul/liじゃなくても親タグの下に子タグが並んでるようなdom構成なら、どこにでも使えます。

子要素全体を掴ませたくない場合は子要素の一部をdraggableにできます。
いろんなイベントが定義されていて動作のカスタマイズが出来ます。

Sortable.create(this.$main[0], {
  handle: '.handleCol',
  onStart: () => this._onStartDragOnSort(),
  onEnd: () => this._onEndDragOnSort(),
  onUpdate: e => this._onUpdate()
});

参考

RubaXa/Sortable
https://github.com/rubaxa/Sortable
demoページ
http://rubaxa.github.io/Sortable/