【Nuxt.js & Vue.js】 ドラッグ＆ドロップで画像を動かす

Nuxt.js上で、こんな風に、画像をドラッグ＆ドロップで動かす方法を紹介していきます。

（Vue.jsも同じ様に実装できるはず）

SVGの使い方については、下記を参考にさせていただきました

www.wakuwakubank.com

1. Circle(円)を動かす

index.vue (青文字部分が、円を描写している部分)

<template>

<svg id="artboard" xmlns="http://www.w3.org/2000/svg" style="background-color:#ccc" width="500" height="500" viewbox="0 0 500 500" @mouseup="dEnd">
<circle class="drag-and-drop" cx=30 cy=30 r=30 fill="blue" @mousedown="mDownCircle" @mousemove="mMoveCircle"/>

</svg>

</template>

<script>
export default {
data () {
return {
x: 0,
y: 0,
cx: 0,
cy: 0,
r: 0,
is_dragging: false,
},
methods: {
mDownCircle () {

// マウスがクリックされたとき、is_draggingをtrueにします
this.is_dragging = true

// クリック時のマウスのX座標とY座標、さらに、circleタグの初期値（cx,cy,r）を変数に格納
this.x = event.pageX
this.y = event.pageY
this.cx = parseInt(event.target.attributes.cx.value)
this.cy = parseInt(event.target.attributes.cy.value)
this.r = parseInt(event.target.attributes.r.value)
},
mMoveCircle () {

// マウスがクリックされたまま動かされた（ドラッグ）時に、circleタグのcxとcyの値を変更します。ドラッグが終了する時、一瞬event.pageXとevent.pageYが0になるので、この時は処理しない様にしています。
if (this.is_dragging && event.pageX !== 0 && event.pageY !== 0) {
event.target.setAttribute('cx', event.pageX - this.x + this.cx)
event.target.setAttribute('cy', event.pageY - this.y + this.cy)
}
},

dEnd () {

//マウスのドラッグ終了時、変数を初期値に戻しておきます
if (this.is_dragging) {
this.is_dragging = false
this.x = 0
this.y = 0
this.cx = 0
this.cy = 0
this.r = 0
}
}

} 

これからは、1.の応用で他の図形も動かしていきます

2. Rectangle(四角)

<template>

<svg id="artboard" xmlns="http://www.w3.org/2000/svg" style="background-color:#ccc" width="500" height="500" viewbox="0 0 500 500" @mouseup="dEnd"><rect x="100" y="150" rx="0" ry="0" width="50" height="40" stroke-width="1" stroke="#00FFFF" fill="#CCFFFF" @mousedown="mDownSquare" @mousemove="mMoveSquare"/>

</svg>

</template>

<script>
export default {
data () {
return {
x: 0,
y: 0,
cx: 0,
cy: 0,
r: 0,
is_dragging: false,
},
methods: {

mDownSquare () {
this.is_dragging = true
this.x = event.pageX
this.y = event.pageY
this.cx = parseInt(event.target.attributes.x.value)
this.cy = parseInt(event.target.attributes.y.value)
},
mMoveSquare () {
if (this.is_dragging && event.pageX !== 0 && event.pageY !== 0) {
event.target.setAttribute('x', event.pageX - this.x + this.cx)
event.target.setAttribute('y', event.pageY - this.y + this.cy)
}
},

dEnd () {

//マウスのドラッグ終了時、変数を初期値に戻しておきます
if (this.is_dragging) {
this.is_dragging = false
this.x = 0
this.y = 0
this.cx = 0
this.cy = 0
}
}

} 

3. Line(線)

<template>

<svg id="artboard" xmlns="http://www.w3.org/2000/svg" style="background-color:#ccc" width="500" height="500" viewbox="0 0 500 500" @mouseup="dEnd"><line x1="100" y1="100" x2="400" y2="100" stroke-width="10" stroke="#FF00FF" @mousedown.self.stop="mDownLine" @mousemove.self.stop="mMoveLine"/>

</svg>

</template>

<script>
export default {
data () {
return {
x: 0,
y: 0,
cx: 0,
cy: 0,

xl: 0,

yl:0,
r: 0,
is_dragging: false,
},
methods: {

mDownLine () {
this.is_dragging = true
this.x = event.pageX
this.y = event.pageY
this.cx = parseInt(event.target.attributes.x1.value)
this.cy = parseInt(event.target.attributes.y1.value)
this.xl = parseInt(event.target.attributes.x2.value) - parseInt(event.target.attributes.x1.value)
this.yl = parseInt(event.target.attributes.y2.value) - parseInt(event.target.attributes.y1.value)
},
mMoveLine () {
if (this.is_dragging && event.pageX !== 0 && event.pageY !== 0) {
console.log("move Line")
event.target.setAttribute('x1', event.pageX - this.x + this.cx)
event.target.setAttribute('y1', event.pageY - this.y + this.cy)
event.target.setAttribute('x2', event.pageX - this.x + this.cx + this.xl)
event.target.setAttribute('y2', event.pageY - this.y + this.cy + this.yl)
}
},

dEnd () {

//マウスのドラッグ終了時、変数を初期値に戻しておきます
if (this.is_dragging) {
this.is_dragging = false
this.x = 0
this.y = 0
this.cx = 0
this.cy = 0

this.xl = 0

this.yl = 0
}
}

} 

4. Polygon(多角形)

<template>

<svg id="artboard" xmlns="http://www.w3.org/2000/svg" style="background-color:#ccc" width="500" height="500" viewbox="0 0 500 500" @mouseup="dEnd">

<polygon points="20 30, 35 10, 50 30" stroke-width="1" stroke="#000000" fill="#FF00FF" @mousedown.self.stop="mDownPolygon" @mousemove.self.stop="mMovePolygon" />
　<polygon points="60 30, 75 10, 90 30, 75 50" stroke-width="1" stroke="#000000" fill="#FF00FF" @mousedown.self.stop="mDownPolygon" @mousemove.self.stop="mMovePolygon" />

</svg>

</template>

<script>
export default {
data () {
return {
x: 0,
y: 0,
cx: 0,
cy: 0,

xl: 0,

yl:0,
r: 0,

arr: '0 0, 0 0, 0 0',
is_dragging: false,
},
methods: {,
mDownPolygon () {
this.is_dragging = true
this.x = event.pageX
this.y = event.pageY
this.arr = event.target.attributes.points.value
},
mMovePolygon () {
if (this.is_dragging && event.pageX !== 0 && event.pageY !== 0) {
let points = ''
const difX = event.pageX - this.x
const difY = event.pageY - this.y
this.arr.split(', ').forEach(function( value ) {
const xy = value.split(' ')
const x1 = difX + parseInt(xy[0])
const y1 = difY + parseInt(xy[1])
if (points === ''){
points = x1 + ' ' + y1
} else {
points += ', ' + x1 + ' ' + y1
}
})
event.target.setAttribute('points', points)
}
},

dEnd () {

//マウスのドラッグ終了時、変数を初期値に戻しておきます
if (this.is_dragging) {
this.is_dragging = false
this.x = 0
this.y = 0
this.cx = 0
this.cy = 0

this.xl = 0

this.yl = 0

this.arr = '0 0, 0 0, 0 0'
}
}

} 

5. Image(埋め込んだ画像) /static内のfavicon.icoを使用します

<template>

<svg id="artboard" xmlns="http://www.w3.org/2000/svg" style="background-color:#ccc" width="500" height="500" viewbox="0 0 500 500" @mouseup="dEnd"><image xlink:href="/favicon.ico" x="300" y="300" width="50" height="40" @mousedown.self.stop="mDownSquare" @mousemove.self.stop="mMoveSquare" />

</svg>

</template>

<script>
export default {
data () {
return {
x: 0,
y: 0,
cx: 0,
cy: 0,
r: 0,
is_dragging: false,
},
methods: {

mDownSquare () {
this.is_dragging = true
this.x = event.pageX
this.y = event.pageY
this.cx = parseInt(event.target.attributes.x.value)
this.cy = parseInt(event.target.attributes.y.value)
},
mMoveSquare () {
if (this.is_dragging && event.pageX !== 0 && event.pageY !== 0) {
event.target.setAttribute('x', event.pageX - this.x + this.cx)
event.target.setAttribute('y', event.pageY - this.y + this.cy)
}
},

dEnd () {

//マウスのドラッグ終了時、変数を初期値に戻しておきます
if (this.is_dragging) {
this.is_dragging = false
this.x = 0
this.y = 0
this.cx = 0
this.cy = 0
}
}

} 

以上ですー！！

上記を組み合わせて、複数の図形を動かすこともできるので、遊んでみてください

今回初めてMacでgif画像を作ったのですが、下記の記事を参考にさせていただきました！簡単便利ーーー！

dev.classmethod.jp

おやすみなさいーー