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