2017-09-23 87 views
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正如你可以看到,如果我雙擊我要放置圖形的位置,形狀仍與我的鼠標移動。我在這裏做錯了什麼?

回答

1

所以你超級密切。您的對象被雙擊放置,但鼠標移動時該事件仍然存在,所以它會再次調用該函數來拖動它。你需要做的是刪除該事件。

這是一個代碼片段和代碼筆給你。

selectRect (e, idx) { 
    let temp = this.$refs.rct[idx] 
    this.$refs.wb.addEventListener('mousemove', this.moveHandler) 
    this.$refs.wb.addEventListener('dblclick', e => { 
     this.$refs.wb.removeEventListener('mousemove', this.moveHandler) 
    }) 
}, 

https://codepen.io/potatogopher/pen/pWEMzg?editors=1011