Этот код должен позволять пользователям перемещать элементы SVG, но по какой-то причине элементы перемещаются только вправо и вниз, независимо от движения мыши.
Другие вопросы как этот похожи, но не помогают.
Разве вы не можете смешивать getBoundingClientRect с манипулированием атрибутами x и y элемента?
Поскольку атрибуты могут содержать процентные значения, мы используемgetBoundingClientRect как основная истина для позиции элемента.
Codepen: https://codepen.io/anon/pen/ZVKvgp
var selectedElem = $("#imageBox1");
var isMoving = false;
var mouseLastX = null;
var mouseLastY = null;
$(document).bind('mousedown', function(e) {
isMoving = true;
});
$(document).bind('mouseup', function(e) {
isMoving = false;
mouseLastX = null;
mouseLastY = null;
});
$(document).bind('mousemove', function(event) {
// Ignore if not moving
if (!isMoving) {
return;
}
// Exit if attempting to move, but no element is selected.
if (!selectedElem) {
console.log("Error moving element: no selected element.");
}
// If here, move selected element.
// Get current mouse position.
var mouseCurX = event.pageX;
var mouseCurY = event.pageY;
// Set last position? Must check null explicitly in case values are 0.
if (mouseLastX == null || mouseLastY == null) {
mouseLastX = mouseCurX;
mouseLastY = mouseCurY;
}
// Get current values for selected element.
var elemClientRect = selectedElem[0].getBoundingClientRect();
var elemX = elemClientRect.x;
var elemY = elemClientRect.y;
// Set deltas.
var deltaX = mouseCurX - mouseLastX;
var deltaY = mouseCurY - mouseLastY;
// Set new element position.
var newX = elemX + deltaX;
var newY = elemY + deltaY;
// Store mouse position.
mouseLastX = mouseCurX;
mouseLastY = mouseCurY;
// Update element.
selectedElem.attr("x", newX);
selectedElem.attr("y", newY);
});