Vue.jsでHTML5のドラッグ＆ドロップを試した。 ローカルでの開発は2.4.1, jsfiddleでは2.2.1で動作していることを確認した。

導入

ここから開発環境用をダウンロードして<script>タグで読み込んだ

https://jp.vuejs.org/v2/guide/installation.html#lt-script-gt-直接組み込み

jsfiddleに貼り付けた

JS長くなった。

inputでエンター押すと新しいアイテムが出てきてそれをドラッグしてグループに移動できるやつ。

touch対応はしていないのでスマホ未対応。なんか便利なオプションができてそれ指定するとtouchも勝手にできるようにとかなってくれないだろうか。 

こだわりポイントとか

• Item, ItemList, Groupがコンポーネントとして使い回せるよう頑張った
• なぜかVue.jsでdataTransfer使ってドラッグからドロップにデータ渡してるサンプルが出てこなかったのでevent.dataTransferでなるべくデータ渡せるようにした
• event.dataTransfer.setData(type, data)でデータを格納
• event.dataTransfer.getData(type)でデータを取得
• （ドロップ時にitem配列から削除が必要だがそのために配列をかなり上のコンポーネントまで伝搬させて行くのが面倒そうだったので外に保管した）

余談

backendだけで何か作ってみたとかやっても目に見えにくいからアウトプットしにくいよね drag and dropをDnDと略すのはDo not disturbっぽくてちょっと嫌 見た目いい感じにしてKPTツールっぽくしようかな

参考

• https://www.html5rocks.com/ja/tutorials/dnd/basics/
• https://jp.vuejs.org/v2/guide/