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

Question

该代码应该可以使用户在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);
});

Answer 1

有几个问题

1. getBoundingClientRect会给你x和y相对于页面，但是x和y属性是相对父容器
2. imageBox1的初始x和y属性均为25% ，因此您不能仅向其添加像素，您需要使用calc(25% + << delta >>px)格式

这是获取图像以所需方式移动的方法：

 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 && mouseLastY) { // Get current values for selected element. 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); // Set deltas. var deltaX = mouseCurX - mouseLastX; var deltaY = mouseCurY - mouseLastY; // Set new element position. var newX = elemXpxls + deltaX; var newY = elemYpxls + deltaY; var newXsign = newX < 0 ? '-' : '+'; var newYsign = newY < 0 ? '-' : '+'; // Update element. selectedElem.attr("x", `calc(${elemXpct}% ${newXsign} ${Math.abs(newX)}px)`); selectedElem.attr("y", `calc(${elemXpct}% ${newYsign} ${Math.abs(newY)}px)`); } // Store mouse position. mouseLastX = mouseCurX; mouseLastY = mouseCurY; }); 

 .imageBox { cursor: move; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg id="rootBox" width="375" height="812" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0%" y="0%" width="100%" height="100%" fill="beige" /> <svg id="imageBox1" class="imageBox" x="25%" y="25%" width="50%" height="50%"> <image class="image" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="https://www.dropbox.com/s/bzm1y7tjrhl872s/Screenshot.png?raw=1" /> <image class="frame" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="https://www.dropbox.com/s/6njspwfz2hgfd03/iPhone_X_Black.png?raw=1" /> </svg> </svg> 

Answer 2

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

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script> $(function () { $("#draggable").draggable(); }); </script>

和你的HTML

<svg id="draggable" width="375" height="812" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0%" y="0%" width="100%" height="100%" fill="beige" /> <svg id="imageBox1" class="imageBox" x="25%" y="25%" width="50%" height="50%"> <image class="image" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="https://www.dropbox.com/s/bzm1y7tjrhl872s/Screenshot.png?raw=1" /> <image class="frame" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="https://www.dropbox.com/s/6njspwfz2hgfd03/iPhone_X_Black.png?raw=1" /> </svg> </svg>