Draggable JS - HTML5のドラッグ&ドロップを多機能に
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.