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


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


とりまjsFiddleで試行錯誤したソースコードをペタペタ。マウス関係のイベントは、もちろんVueで用意されているので、割と簡単に実装できた。

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

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

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

つまりこう。

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

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

<line @mousedown="touchstart"/>

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)