HTML5にはドラッグ&ドロップAPIが追加されました。これによってローカルファイルをドラッグ&ドロップでアップロードしたり、DOM同士をドラッグ&ドロップできるようになりました。
このAPIも素のままでは使いづらいところがあります。そこで今回は利便性を高めてくれるライブラリを紹介します。
Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.
Shopifyが開発しているドラッグ&ドロップライブラリです。DOM向けのライブラリで、ドラッグするオブジェクトごとにドロップできる場所を定義できます。スワップのようなオブジェクト同士を入れ替える機能もあります。
さらにドロップした後のソートであったり、ドロップできない場所に持っていくと震えるといったイベントの設定もできます。
Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.
feross/drag-drop: HTML5 drag & drop for humans
onDrop/onDropTextといったイベントを購読できるようになります。ファイルをドラッグしてきたら特定のDOMを変化させたり、ドロップしたファイルを受け取れます。また、テキストのドラッグ&ドロップも可能です。
feross/drag-drop: HTML5 drag & drop for humans
bevacqua/dragula: Drag and drop so simple it hurts
DOM同士のドラッグ&ドロップに対応したライブラリです。DOM全体をドラッグ可能にすることも、ハンドルをつけてその部分だけをドラッグ可能に指定することもできます。
bevacqua/dragula: Drag and drop so simple it hurts
ドラッグ&ドロップができるとアプリケーション感が強くなります。ローカルファイルはもちろんのこと、Gmailのように別なボックスに振り分けるのも直感的になります。使いこなすのは難しいですが、今回紹介したライブラリを使えば大幅に工数が削減されるはずです。