0
我正在嘗試使用SVG在Vue中實現拖放功能,並且我可以單擊一個形狀並隨鼠標一起移動;但是,我不能完全弄清楚如何取消選擇該形狀,以便將其放置在發出雙擊事件的座標上。這是我的Vue例如:如何取消Vue中可拖動的svg元素?
new Vue ({
el: '#meow',
data: {
x: '',
y: '',
rects: [
{x: 100, y: 100, width: 150, height: 150, fill: 'black'}
]
},
methods: {
moveHandler() {
this.$refs.rct[0].setAttribute('transform', `translate(${this.x-100}, ${this.y-100})`)
},
selectRect (e, idx) {
let temp = this.$refs.rct[idx]
this.$refs.wb.addEventListener('mousemove', this.moveHandler)
this.$refs.wb.addEventListener('dblclick', e => {
temp.removeAttribute('transform') // should I remove the transform attribute?
})
},
getMousePositionOnCanvas (e) {
var mousePos = this.getCoordinates(this.$refs.wb, e);
this.x = mousePos.x
this.y = mousePos.y
},
getCoordinates (canvas, evt) {
const rect = canvas.getBoundingClientRect()
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
}
}
}
})
對於工作演示:請參閱https://codepen.io/p-adams/pen/gGwEQQ?editors=1010正如你可以看到,如果我雙擊我要放置圖形的位置,形狀仍與我的鼠標移動。我在這裏做錯了什麼?