【dragreplace.js】スマートフォンなどのタッチデバイスでのドラッグ&ドロップにも対応したjQueryプラグイン

2015.08.17

jQuery uiで対応できないタッチデバイスでのドラッグ&ドロップを可能にするjQueryプラグイン

イメージ画像
PCサイトでのドラッグ&ドロップをおこなう際に便利に使えるのがjQuery uiですが、
タッチデバイスなどスマートフォン系では動作しないという欠点があります。

そんな時に大変便利なjQueryプラグインが「dragreplace.js」です。

jQueryのプラグインになっているので、
導入方法も簡単でjQuery本体とdragreplace.jsをちゃんと読み込めば、
お手軽に要素のドラッグ&ドロップを実装することができます。

例えば、
HTML:
  • element01
  • element02
  • element03
  • element04
  • element05
  • element06
というHTMLがあった場合は、
JavaScript:
$('.drag_and_drop_list li').replaceable();
と指定するだけで、
.drag_and_drop_listのリスト要素がドラッグ&ドロップできるようになります。

ドロップ後のイベントも指定できるので、
ドロップ後に何か処理をしたい場合でも色々できそうです。

dragreplace.jsの作者さんのサイトからgithubjsdo.itでのわかりやすいDEMOも参照できるので、
簡単な実装であれば困らないかなと思います。
← 【jQuery UI Touch Punch】タッチデバイスに対応していないjQuery UIをスマートフォンなどのタッチデバイス対応にするjQuery UI拡張ライブラリ
【fullPage.js】縦にも横にもスライドして画像も動画も全画面表示できるシングルページ向けjQueryプラグイン →