ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。

ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。


使い方は簡単でDOMに対してpep()を実行するだけ。


ドラッグで移動させられます。


枠の中だけでの移動もその逆もできます。


コールバック対応です。


スライダーを動かすと大きさが変わるデモ。


X軸、Y軸を固定にすることもできます。


こちらはiPhoneで試した所。動きに慣性があるのが特徴です。

Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。

PepはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

スマートフォンでできる操作は大抵デスクトップでも実現できます。しかしその逆にデスクトップでできてもスマートフォンでは無理がある操作は時々あります。APIが異なる場合も多く、そういう時の開発はとても厄介です。

最近ではデスクトップとスマートフォンで同様の操作を望まれることも多いので、ライブラリが両方に対応しているかどうかは必ずチェックした方が良いでしょう。代替のライブラリを探したとしてもやり方が異なるケースは多いので注意が必要です。

Pep - kinetic drag on mobile & desktop

Demos

briangonzalez/jquery.pep.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2