jquery.pep.js でマス目にコマを吸着させる処理を行う

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/26 14:34

ただいまコメントを受けつけておりません。

jquery.pep.js でマス目にコマを吸着させる処理を行う

Drag & Drop は思ってたより難しかった

スマートフォンから Drag & Drop をちゃんと使えるウェブアプリケーションをを作りたかったのだが、色々やってもうまくいかなかった。が、この jquery.pep.js だとうまくいったので紹介。

jquery.pep.js のライセンスとかの情報

とりあえず試す

gihub リポジトリからコードを入手し、 src ディレクトリ内の jquery.pep.js を使う。

<div id="pep-js-try" style="width:20px;height:20px;background-color:red;"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="lib/jquery.pep.js" type="text/javascript"></script>
<script src="callPep.js" type="text/javascript"></script>

// callPep.js
$('#pep-js-try').pep();

内部の座標管理

内部の座標処理を調べた。どうも CSS の transform プロパティを使って実現しているようだ。そのため、例えば次のようにすると将棋のようなマス目にそってコマを動かすインタフェースのゲームを作るときに便利かもしれない。

function normalizePosition($pepedElement) {
  var blockSize = 32; // 例えば 1辺 30px+border 1px のマス目
  $pepedElement.pep({
    // stop を使うとドロップした際に発生するイベントを設定できる。
    // 他にもプロパティがあるので詳細は https://github.com/briangonzalez/jquery.pep.js#usage
    stop: function(event, object) {
      var $elem = this.$el; // this.$el にドラッグアンドドロップ対象のオブジェクトが格納されている
      var position = $elem.position(); // 親要素からの相対位置取得
      // 何番目のマスにいるのか計算
      var coordinateX = Math.floor((position.left + (blockSize / 2)) / blockSize);
      var coordinateY = Math.floor((position.top  + (blockSize / 2)) / blockSize);

      var normalizedX = (coordinateX * blockSize) - Number($elem.css("left").replace("px", ""));
      var normalizedY = (coordinateY * blockSize) - Number($elem.css("top").replace("px", ""));
      $elem.css("transform", "matrix(1, 0, 0, 1," + normalizedX + "," + normalizedY +")");
    }
  });
}

こんな感じのコードを実際に過去に作ったアプリケーションで使っている。
http://sy17.sakura.ne.jp/shunshun/tofChatProto.html