Skip to content

HTML5のドラッグ&ドロップを便利にしてくれるライブラリまとめ

by : 2018/04/18

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のように別なボックスに振り分けるのも直感的になります。使いこなすのは難しいですが、今回紹介したライブラリを使えば大幅に工数が削減されるはずです。

From → まとめ

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。