簡単にドラッグ&ドロップができるjquery.pep.jsを実装する【デモ有り】

こんにちは。じーよです。
今回はjquery.pep.jsを使って要素を自由に動かせるようにします。

jquery.pep.jsとは

DOM要素をドラッグ可能なオブジェクトに変換するjqueryのプラグインです。

導入します

今回利用するjquery.pep.jsを以下のページからダウンロードしてください。
https://github.com/briangonzalez/jquery.pep.js/

ダウンロードしたjquery.pep.jsをプロジェクトディレクトリーに置く
ダウンロードしたファイルを解凍し、以下二つのファイルをコピーし、導入したいWebサイトのディレクトリ内に置いてください。

• ・jquery.js
• ・jquery.pep.js

その後HTMLファイルでファイルを読み込みます。

実際に動かします

デモ

デモページ

要素を動かします

• 動かしたいclass名を入力します。動かしている間pep-activeとpep-startのクラスが付与されます。このような感じで動かせます。

オプションを使って機能を追加

• [droppable:’.任意のクラス名’]動かしている要素が入ったら[pep-dpa]クラス付与します。
• [axis:x,y,auto]指定した物によって要素の動きを制限します。
• [constrainTo: ‘parent’]親要素からはみ出なくなります。

まとめ

ドラッグ&ドロップしたい要素のクラス名を入力するだけで簡単に実装することができるので使ってみてはいかがでしょうか。
jquery.pep.jsはまだ紹介していないオプションが多数あるので、詳しく知りたい方はこちらをご覧ください。