オブジェクトのドラッグ移動を実現するJavaScriptライブラリ「Pep」
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。
ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 16.11.48.1356511232.png)
使い方は簡単でDOMに対してpep()を実行するだけ。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 16.11.51.1356511236.png)
ドラッグで移動させられます。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 16.11.58.1356511241.png)
枠の中だけでの移動もその逆もできます。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 16.12.20.1356511244.png)
コールバック対応です。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 16.12.35.1356511250.png)
スライダーを動かすと大きさが変わるデモ。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-26 16.12.47.1356511254.png)
X軸、Y軸を固定にすることもできます。
[](http://images.moongift.jp/2012/12/2012-12-26 16.23.11.1356511257.png)
こちらはiPhoneで試した所。動きに慣性があるのが特徴です。
Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。
PepはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
スマートフォンでできる操作は大抵デスクトップでも実現できます。しかしその逆にデスクトップでできてもスマートフォンでは無理がある操作は時々あります。APIが異なる場合も多く、そういう時の開発はとても厄介です。
最近ではデスクトップとスマートフォンで同様の操作を望まれることも多いので、ライブラリが両方に対応しているかどうかは必ずチェックした方が良いでしょう。代替のライブラリを探したとしてもやり方が異なるケースは多いので注意が必要です。