dragreplace.js

とある案件で作る必要があったので、それをカスタマイズしてjQueryプラグインの形にしてみたのが今回作成したdragreplace.jsです。

できることはシンプルで、ドラッグ&ドロップで要素を入れ替えられるようにしました。ただ、主にスマホ(WebKit)で使うことを想定して作っています。
そのため動作はWebKitだけになっています。（transitionやtransformを使って操作しているため）

pluginについてはgithubでも公開しています。

Config - 設定オプション

$('.replaceableList li').replaceable({ dragger: false });

draggerオプションをfalse（デフォルトはture）にすることで、要素全体をドラッグ対象にすることができます。
trueの場合は指定した要素の右側にドラッグするための要素が自動で追加され、そこをドラッグすることで要素の移動ができるようになります。

イベントについて

dragreplace.jsでは、置換完了時にカスタムイベントreplacedを発火しています。
置換完了時になにか処理したい場合にこのイベントをlistenしてください。

また、イベント発火時にはそれぞれ置換された要素の参照が渡されます。(fromとtoをプロパティに持つオブジェクト）

$('.replaceableList li').replaceable().bind('replaced', function (event, replaceElements) { //replaceElements.from 置換元の要素です。（ドラッグしたほう） //replaceElements.to 置換先の要素です。 });

CSSについて

dragreplace.jsは、ドラッグ中や置換対象などの見た目をCSSで制御しています。その際に使用しているクラスは以下の通りです。

クラス名	利用説明
replaceable	replaceableを実行すると、対象となる要素に自動で付与されます。見た目の変更はありません。
dragging	ドラッグ中に、ドラッグ元の要素に付与されます。ドラッグされていることを明示的にする目的で使用されます。
dragTarget	ドラッグ中に、マウスや指に追従する要素に付与されます。要素自体はドラッグ元の要素の複製になります。
hit	ドラッグしている要素が置換対象にヒットしているかどうかの当たり判定です。当たり判定がtureの場合にhitクラスが付与されます。
replaceItemMove	置換実行時、相互に要素が移動しているときに付与されるクラスです。要素自体はそれぞれの要素の複製になります。