I have been working on adding a new functionality that allows me to drag SVG shapes by using the mousedown event. Although I have managed to get the basic functionality to work, I am facing an issue where, after dragging the shape and releasing the mouse (mouseup event), if I try to drag the same shape again, it does not move along with the mouse position. The shape remains static until another mouseup event is triggered.
Below is a mixin that I created to extend the moveable behavior:
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 = {};
}
}
}
Check out this demo showcasing the issue: https://codepen.io/p-adams/pen/gGwEQQ
I'm puzzled as to why the shape only drags correctly the first time it's moved, and subsequent attempts don't immediately track the mouse position. Any insights on what might be causing this behavior?