D3.jsでマルチタッチでの複数個別ドラッグ

マルチタッチ向けの簡単なプログラムを作成する事になりライブラリーを調べていたら、
簡単にドラッグ&ドロップができるjquery.pep.jsを実装する【デモ有り】 | 株式会社ブリッツゲート にあるように、jquery.pep.jsが、色々機能も充実していて便利そうです。

要件には同時に複数のオブジェクトを別々にドラッグ可能出来る必要があるのですが、
githubよりダウンロードしてデモやソースを確認していると、どうやら、残念ながら jquery.pep.jsは対応しておらず、別々にドラッグしようとしても一つ目についていってしうようです。
MITライセンスなのでカスタマイズして使用する事も考えていたのですがもう少し調べているとd3.jsが対応している様なので確認してみました。


D3.js v4/5 drag 使い方 – データビジュアライゼーション・ラボ にサンプルがでていたので試してみると確かに両手で別々にドラッグすると問題無く別々に移動していきます。

D3の名称は「Data-Driven Documents(データ駆動ドキュメント)」なので基本的には、データを元にドキュメント出力(ビジュアライズ可)する事ををメインとしているようですが 実際には、HTML Elementsも操作する事ができるのでマルチタッチの処理が簡単にできそうです。

そんな訳で、簡単に試してみました。
コードは、D3.js v4/5 drag 使い方 – データビジュアライゼーション・ラボの使い方に記載してたとおりです。


ドラッグ可能なオブジェクトをhtmlに記述(今回は画像)
< /body>
<img src="/images/logo.png" class="logo" style="position:absolute;top:10px;left:10px;">
<img src="./images/h01_1.png" class="logo" style="position:absolute;top:10px;left:100px;">
<img src="./images/h01_2.png" class="logo" style="position:absolute;top:80px;left:10px;">
<img src="./images/h01_3.png" class="logo" style="position:absolute;top:80px;left:100px;">
<img src="./images/h01_4.png" class="logo" style="position:absolute;top:10px;left:200px;">


<script src="//d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script>

var drg = d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended);//それぞれのドラッグイベントに関数を設定します(もちろんそのまま処理を記載しても問題ありません)。

var svg = d3.select('body').selectAll(".logo").call( drg );//.selectAll部分にドラッグイベントを設定したい要素のセレクタを指定します。
 
//ドラッグスタート時に呼び出される関数
function dragstarted() {
  // 処理を記載
}
 
//ドラッグ中に呼び出される関数
function dragged(d,i) {
    d3.select(this).style("top",d3.event.y +'px');
    d3.select(this).style("left",d3.event.x +'px');

    console.log("dragged: [%s:%s] [%s:%s]", this.left,this.top, d3.event.x,d3.event.y);    
}
 
//ドラッグ終了時に呼び出される関数
function dragended() {
  // 処理を記載
}
</script>

これだけです。(実際にはこのままでは、ドラッグすると画像の左上が起点になって移動するため画像サイズを取得してドラッグ時の移動を調整する必要はあると思いますが)
スマホやマルチタップ対応のディスプレイで閲覧しているなら右手と左手で別の画像を選びそれぞれ別々に動かしてみてください。
もちろんマウスのドラッグイベントも対応してます。
詳しくは、ドラッグの詳しいドキュメントは公式サイトに記載されていますので、https://github.com/d3/d3/blob/master/API.md#dragging-d3-dragを参照ください。

d3.jsは、SVGで描画でデータのグラフ化以外にもオブジェクト操作も色々簡単にできて、以前紹介したNW.jsと組み合わせても面白いと思います。