Interact.jsを使ってインタラクティブな要素の移動や回転を作る方法

ユーザの手によって<div>タグの大きさや位置を、ドラッグして移動や拡大させたいとき、簡単に実装できるInteract.jsのご紹介します。ちゃんとスマホでも動作確認できたのでこのようなUIが必要なとき、必要な使い勝手がいいと思います。

http://interactjs.io/

Document: http://interactjs.io/docs/

実装方法

このサンプルコードでは、pを移動させることができます。

詳しい解説は後に回すとして、一旦、コードをご覧ください。

<p class="draggable"></p>
interact('.draggable')
  .draggable({
    // 慣性ありのときtrue, 慣性なしのときfalse
    inertia: true,
    // 範囲を制限するときに指定
    restrict: {
      restriction: "parent", // 親要素を範囲に指定
      endOnly: true, // trueを指定した場合、ドロップした瞬間に範囲を超えているとき、範囲内に戻す
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 } // 普通はこの設定でいい。詳細はドキュメントを参照。
    },
    // スクロールが必要な範囲にドラッグしたとき、自動的にスクロールする
    autoScroll: true,
    // call this function on every dragmove event
    onmove: function(event){
      // dragされている要素
      var target = event.target;
      // data属性から今の位置を取得して、移動分を足す
      var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
      // 位置を変更
      target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
      // 位置をdata属性に保持
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    },
    // call this function on every dragend event
    onend: function (event) {
   // 終了したときの処理
    }
  });

解説

各オプションはドキュメントを見れば分かりやすく書いてあるので、コメントを参考に見てみてください。

interact.jsはイベントを取得してくれるだけで、実際に移動するコードはonmoveonendで自分で書かなくてはいけません。

例えば、移動の場合はマウスが動いた時、移動した分だけ、CSSのtranslateの値を変更して、移動しているように見せています。

もし、回転や拡大・縮小したい場合も同様にrotatescaleを操作して表現することになります。

まとめ

自分で実際の処理を書かなければならないのは、面倒な一方で、処理の内容をかなり自由度高く作れるので、いろいろ試してみると面白いことがいろいろできるかもしれません。