SVG和JavaScript：使用鼠标移动元素只会向下和向右移动元素

这段代码应该允许用户四处移动SVG元素，但出于某种原因，这些元素只向下和向右移动，而不受鼠标移动的影响

其他问题类似，但没有帮助

不能将

getBoundingClientRect

与元素的

x

和

y

属性的操作混合使用吗

因为属性可能包含百分比值，所以我们使用

getBoundingClientRect

作为元素位置的基本事实

代码笔：

---

如果目标只是使SVG可移动，那么可以使用jquery中的draggable

$（函数（）{
$（“#可拖动”）.draggable（）；
});

还有你的html

---

有几个问题

getBoundingClientRect

将为您提供相对于页面的

x

和

y

，但是

x

和

y

属性是相对于父容器的

imageBox1

的初始

x

和

y

属性都是

25%

，因此您不能只添加像素，您需要使用

calc（25%+>px）

格式

以下是如何让图像按您想要的方式移动：

var selectedElem=$（“#imageBox1”）；
var isMoving=假；
var mouseLastX=null；
var mouseLastY=null；
$（文档）.bind（'mousedown'，函数（e）{
isMoving=真；
});
$（document）.bind（'mouseup'，函数（e）{
isMoving=假；
mouseLastX=null；
鼠标弹性=零；
});
$（文档）.bind（'mousemove'，函数（事件）{
//如果不移动，请忽略
如果（！isMoving）{
返回；
}
//如果尝试移动但未选择任何元素，请退出。
如果（！selectedElem）{
log（“移动元素时出错：没有选择的元素”）；
}
//如果在此处，请移动选定图元。
//获取当前鼠标位置。
var mouseCurX=event.pageX；
var mouseCurY=event.pageY；
//设置最后位置？如果值为0，则必须显式检查null。
if（mouseLastX&&mouseLastY）{
//获取选定元素的当前值。
var currX=selectedElem.attr（“x”）；
var currY=selectedElem.attr（“y”）；
var elemXpct=parseInt（currX.match（/\d+（？=%）/）；
var elemYpct=parseInt（currY.match（/\d+（？=%）/）；
var elemXpxls=parseInt（currX.match（/\d+（？=px）/）| | 0）*（/-/.test（currX）？-1:1）；
var elemYpxls=parseInt（currY.match（/\d+（？=px）/）| | 0）*（/-/.test（currY）？-1:1）；
//设置三角洲。
var deltaX=mouseCurX-mouseLastX；
var deltaY=鼠标安全性-鼠标弹性；
//设置新元素位置。
var newX=elemXpxls+deltaX；
var newY=elemYpxls+deltaY；
var newXsign=newX<0？'-'：'+'；
var newYsign=newY<0？'-'：'+'；
//更新元素。
selectedElem.attr（“x”，calc（${elemXpct}%${newXsign}${Math.abs（newX）}px）`）；
selectedElem.attr（“y”，calc（${elemXpct}%${newYsign}${Math.abs（newY）}px）`）；
}
//存储鼠标位置。
mouseLastX=mouseCurX；
鼠标弹性=鼠标安全性；
});
.imageBox{
光标：移动；
}

非常感谢！随机问题，但您是否实现了将SVG元素捕捉到其他元素并在用户移动元素时显示智能指南的代码？顺便问一下，您是否进行SVG咨询？@ic3b3rg拖动鼠标在Firefox中不起作用
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);
});