Vue.jsを使ってクリックした位置に要素を移動させる方法

こんにちは、コンスキです。

今回はVue.jsを使って、クリックした位置に要素を移動させるアニメーションを作る方法を説明します。

今回ご紹介するのは次のようなアニメーションです。

作り方
注意するところ
- クリックが効く範囲
- v-onディレクティブの属性値の書き方
おわりに

作り方

コードの完成形は次のようになります。

<template>
  <div id="app" @click="move">
    <div class="moving-box" :style="{ transform: `translate(${x}px, ${y}px)` }">
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  },
  data () {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    move (e) {
      this.x = e.offsetX - 50
      this.y = e.offsetY - 50
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  height: 80vh;
  width: 80vw;
  margin: 30px auto;
  box-sizing: border-box;
  border: 1px solid black;  
}
.moving-box {
  height: 100px;
  width: 100px;
  transition: transform .5s ease;
  box-sizing: border-box;
  border: 1px solid black;
  background-color: #41B883
}
</style>

大まかな考え方

動かす要素にstyle属性を設定する
そのstyle属性の属性値には「transform: “transllate(x座標, y座標)”」という値を設定する
dataプロパティにはクリックした座標を表す「x: 0」と「y: 0」を設定する
クリックするたびに、dataプロパティに設定してある座標をクリックした部分の座標に変更する
style属性の(x座標, y座標)の部分をdataプロパティの座標に結びつける
クリックするたびにstyle属性を設定した要素が移動する

動かす要素の設定をする

動かしたい要素には次のようにdataプロパティのプロパティと結びつけた、style属性を設定しておきます。

<div class="moving-box" :style="{ transform: `translate(${x}px, ${y}px)` }">

注目するのは、「${x}」と「${y}」の部分です。このように書くことでdataプロパティの「x」というプロパティと「y」というプロパティの値を動かす要素のstyle属性に結びつけることができます。

結びつけるということは、dataプロパティの「x」と「y」が変更されたときに、それに合わせて動かす要素のsytle属性の属性値が変わるということです。

クリックするたびにdataプロパティを変更する

クリックするとmoveというメソッドが使われるように設定しています。↓

<div id="app" @click="move">
</div>

moveメソッドを使うとdataプロパティの「x」はクリックした部分のx座標に変更されます。同じように「y」もクリックした部分のy座標に変更されます。↓

move (e) {
  this.x = e.offsetX - 50
  this.y = e.offsetY - 50
}

「e.offset – 50」というように動かす要素の横幅半分のピクセル数と、高さの半分のピクセル数をクリックした位置のx座標にとy座標それぞれから引いています。

こうすることで動かす要素は、クリックした位置に要素の真ん中が来るように移動することになります。

注意するところ

クリックが効く範囲

要素が動くのは「v-on: click(move)」を設定している要素の中でクリックしたときだけです。

「v-on: click(move)」を書いた要素の外をクリックしても、動かしたい要素は動かないので注意してください。

v-onディレクティブの属性値の書き方

v-onディレクティブの値には今回アニメーションのようにメソッドを書くことが多いと思います。

今回のように、「クリックされたら実行するメソッド」の中でイベントオブジェクトを使いたいときは、メソッド名の書き方に注意してください。

v-onディレクティブの属性値のメソッド名にかっこをつける場合と、かっこを付けない場合ではイベントオブジェクトの使い方に違いがあります。

メソッド名にかっこを付ける場合

<template>
  <div id="app" @click="move(第一引数にはなにかの値, event)">
  </div>
</template>
<script>
  methods: {
    move (someValue, $event) {
      this.x = $event.offsetX - 50 
      this.y = $event.offsetY - 50
      console(someValue)  //この行は「someValue」という引数を使うために書いています。
    }
  }
<script>

メソッド名にかっこを付けない場合（今回紹介した書き方）

<template>
  <div id="app" @click="move">
  </div>
</template>
<script>
  methods: {
    move (e) {
      this.x = e.offsetX - 50 
      this.y = e.offsetY - 50
    }
  }
<script>