ドラッグ&ドロップで要素を入れ替えるスマホ向けjQuery pluginを作った

カテゴリ:Javascript関連 2011年12月31日 09:10

dragreplace.js

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

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

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

デモ

jsdo.itでデモを公開しています。それを貼りつけたのがこちら↓
(WebKit系のみ対応しているので、WebKit系ブラウザでご覧ください)

dragreplace.js demo - jsdo.it - share JavaScript, HTML5 and CSS

動作は単純です。右側にある部分をドラッグすることで、該当の要素と入れ替えることができます。
jQueryのpluginの形になっているので以下のように指定するだけで簡単にdrag&dropで入れ替えができます。
jQueryのセレクターで指定した要素でグルーピングされるので、グループ外の要素とは置換されなくなります。

要素の置換にはtransitionを利用してアニメーションされるようにしているので、どことどこが入れ替わったのかが視覚的にわかりやすくなっています。

Config - 設定オプション

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

イベントについて

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

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

CSSについて

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

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

この記事のカテゴリー一覧を見る⇒Javascript関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/204