SVGをVueで移動する

Question

mousedownをドラッグしてSVGシェイプをドラッグできるようにする機能を実装しようとしています。私は基本的な機能は動作していますが、私は形状をドラッグした後にmouseupイベントを実行した後、同じ形状を再びドラッグしようとすると、その形状がマウスの位置に沿ってドラッグされません。形状は固定されたままで、別のときにのみmouseup形状はマウスの位置に再び追従します。ここで

は、私が移動可能な振る舞いを拡張することを書いたのmixinです：

ここ

const Moveable = { 
    data() { 
     return { 
     x: '', 
     y: '', 
     coords: { 
      x: 0, 
      y: 0 
     } 
     } 
    }, 
    methods: { 
     handleMouseMove(e) { 
     const xDiff = this.coords.x - e.pageX; 
     const yDiff = this.coords.y - e.pageY; 

     this.coords.x = e.pageX; 
     this.coords.y = e.pageY; 
     this.x = this.x - xDiff; 
     this.y = this.y - yDiff; 
     }, 
     handleMouseDown(e) { 
     this.coords = { 
      x: e.pageX, 
      y: e.pageY 
     }; 
     document.addEventListener("mousemove", this.handleMouseMove); 
     }, 
     handleMouseUp() { 
     document.removeEventListener("mousemove", this.handleMouseMove); 
     this.coords = {}; 
     } 
    } 
} 

ある問題を示してデモ：https://codepen.io/p-adams/pen/gGwEQQ

は、なぜそれが最初に移動したときにのみ正しくドラッグ形状である、とのためにその後のドラッグ、それはすぐにマウスの位置に従いませんか？あなたがfirst elementのドラッグを開始し、second element上のmouseUp場合、second element「（のmouseupが呼ばれるべきsのsのhandleMouseUpがfirst element実際には）と呼ばれている」ので

Answer 1

問題があります。

ソリューション：

あなたは、マウスアップ時にすべてのイベントリスナーを削除する必要があります。

Answer 2

要素をマウスの下に保存する必要がある場合があります。次に、マウスの上にある正しい要素のイベントハンドラを削除できます。

let myElement = {} 
const Moveable = { 
    data() { 
    return { 
     x: '', 
     y: '', 
     coords: { 
     x: 0, 
     y: 0 
     } 
    } 
    }, 
// myElement : Any, 
    methods: { 
    handleMouseMove(e) { 
     const xDiff = this.coords.x - e.pageX; 
     const yDiff = this.coords.y - e.pageY; 

     this.coords.x = e.pageX; 
     this.coords.y = e.pageY; 
     this.x = this.x - xDiff; 
     this.y = this.y - yDiff; 
    }, 
    handleMouseDown(e) { 
     this.coords = { 
     x: e.pageX, 
     y: e.pageY 
     }; 
     myElement = this; 
     document.addEventListener("mousemove", myElement.handleMouseMove); 
    }, 
    handleMouseUp() { 
     document.removeEventListener("mousemove", myElement.handleMouseMove); 
     myElement.coords = {}; 
    } 
    } 
}