Question

该代码应该可以使用户左右移动SVG元素，但是由于某些原因，这些元素只能上下移动而与鼠标移动无关。

其他问题like this相似，但无济于事。

您不能将x与元素的y和getBoundingClientRect属性的操纵混合在一起吗？

由于属性可能包含百分比值，因此我们将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); });用作元素位置的基础。

Codepen：https://codepen.io/anon/pen/ZVKvgp

stack

Answer 1

有几个问题

getBoundingClientRect将为您提供相对于页面的x和y，但是x和y属性相对于父容器
x的初始y和imageBox1属性均为25%，因此您不能仅向其添加像素，需要使用{{1 }}格式

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

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;
}

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和JavaScript：使用鼠标移动元素只能将元素向下和向右移动

2 个答案: