dragula - 簡単に使えるD&Dライブラリ
Webアプリケーションではドラッグ&ドロップインフェースがよく使われます。ファイル管理風のUIを使う場合もそうですし、リストの並び替えであったり、Gmailのようなメーラーでも使われる機能です。 そんなWeb上でのドラッグ&ドロップ操作を実現してくれるのがdragulaです。とても手軽に使えそうです。
dragulaの使い方
dragulaのデモです。
使い方は簡単で、例えばjQueryなら次のようにDOMを指定するだけです。
dragula([document.querySelector('#left'), document.querySelector('#right')]);
他にもAngular/Angular2/Reactでも使うことができます。
こんな感じにドロップでイベントを実行することもできます。
さらにDOM全体ではなくハンドルを指定できます。これならば文字列はコピーできて便利ですね。
dragulaを使えばユーザに自由にDOMを動かしてもらうようなUIが実現できるでしょう。後はサーバ側で並び方を記録するか、localStorageに書き込んでおけば良いでしょう。
dragulaはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
dragula - Browser drag-and-drop so simple it hurts bevacqua/dragula: Drag and drop so simple it hurts