【Vue.js】要素をドラッグして動かす

※2019年ぐらいに別ブログで書いた記事のリメイク版です。

Vue.jsを使って、練習がてらHTMLの要素をドラッグして動かすやつを作った。べつにdivで作った箱でもなんでもよかったのだけれど、ちょうど最近SVGを使って作画してるので、なんとなくSVGのlineで作った×でも動かしてみることにした。

<svg @mousemove="touchmove($event)" @mouseup="touchend($event)" @mouseleave="touchend($event)">
 <line v-for="line in list_line" @mousedown="touchstart($event)" :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2" :stroke-width="line.width" :stroke="line.stroke"/>
</svg>

マウス押下時のイベントmousedownでドラッグ開始、マウス動いた時のイベントmousemoveでドラッグ処理、マウス離したときのイベントmouseupまたはマウスが場外に出ちゃったイベントmouseleaveでドラッグ終了てな感じ。

イベントハンドリング — Vue.js

イベントが起こった時にクリックされた地点の座標をどうやって取ってくるのかというと、公式のドキュメントを読む限り、$eventをイベントで呼び出すメソッドの引数にぶちこんでやればいいらしい。

<line @mousedown="touchstart($event)"/>

つまりこう。

methods : {
   touchstart : function(e){
       console.log("touch start:%d,%d", e.offsetX, e.offsetY);
   }
}

$eventを受け取るスクリプト側ではこんな感じ。そうすれば、いつも使ってるようなマウスイベントのプロパティを参照できる。やったぜ。

<line @mousedown="touchstart"/>

ちなみに理屈はよく分からんが、こうやって引数省略して書いといても、第一引数に$event入ってくるみたいだぜ。