Drag the SVG element to a new location
if (action == "mousedown") {
startx = x;
starty = y;
}
if (action == "mousemove") {
if (!mouseisdown) {
return;
} else {
//console.log(target);
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
}
if (action == "mouseup") {
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
Below is my way to get x, y position:
$("svg").on("mousedown", function (event) {
mouseisdown = true;
var offset = $("#center").offset(); //#center is the canvas
var x = event.pageX - offset.left;
var y = event.pageY - offset.top;
current_tool("mousedown", x, y, null);
});
Above part of my code, my problem is that this function works well on the first move, but when I tried to move it a second time, the element object will suddenly return to its original location before that first action. How do I fix this problem? Any help is appreciated.
+3
source to share
1 answer
if (action == "mousedown") {
startx = x - test.transform.animVal["0"].matrix.e; //change
starty = y - test.transform.animVal["0"].matrix.f; // change2
}
if (action == "mousemove") {
if (!mouseisdown) {
return;
} else {
if (test.transform.animVal["0"]) {
console.log(test.transform.animVal["0"].matrix);
var transformX = x - startx;
var transformY = y - starty;
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
}
}
if (action == "mouseup") {
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
The problem I am solving, the cause of the problem is that when I try to do the second step, the starting position does not take into account the first transformation, so after changing the code in the mousedown handler, the problem is resolved.
+1
source to share