Vueでドラッグ可能なsvg要素の選択を解除するには？

Question

SVGを使用してVueにドラッグアンドドロップ機能を実装しようとしています。シェイプをクリックすることができ、マウスとともに移動します。ただし、ダブルクリックイベントを発行する座標に配置するようにシェイプの選択を解除する方法はわかりません。ここに私のVueのインスタンスは次のとおりです。

作業のデモについては

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を参照してください。私はここで間違って何をしていますか？

Answer 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