HTML5の新しい機能の一つにドラッグ&ドロップAPIがあります。Gmailなどでは当たり前になっていますし、WYSIWYGな機能を提供する上では必須の存在です。Webアプリケーションでは大事な機能でしょう。 そんなドラッグ&ドロップAPIを多機能にしてくれるライブラリがDraggable JSです。

Draggable JSの使い方

デモです。ドロップできる場所を指定できます。

こちらも同様に。片方はドロップできますが、もう片方はできません。

スワップのデモです。模様が入れ替わります。

ソートのデモ。ドラッグすると並び変わっています。

ドロップできないところに持っていくとブロックが震えます。

マウスオーバーでアニメーションします。

こちらもアニメーション。さらに派手な感じです。

マウスオーバーで跳ねます。

Draggable JSはEコマースサービスで知られるShopifyの開発しているライブラリです。Eコマースサイトの管理画面などではドラッグ&ドロップが使われていても不思議ではありません。それだけに実践的で、必要とされる機能が実装されているでしょう。

Draggable JSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Draggable JS – JavaScript drag and drop library Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.