Question

我有一个SVG rect元素，我需要在屏幕上拖动。问题是它在快速拖动时不起作用。我在jsFiddle发布了代码。

this post中的示例解决了JQuery中的问题。我将解决方案改编为SVG，但它不起作用。有任何想法吗？

这是HTML代码：

<svg id="svg" width="800" height="800" style="border: 1px dashed black;"
onmousemove="move(evt)" onmouseup="endMove(evt)" onmouseout="endMove(evt)">

<rect id="r" x="100" y="100" height="150" width="150" onmousedown="mouseDown(evt)"/>

</svg>

和javascript：

  var click=false; // flag to indicate when shape has been clicked
  var clickX, clickY; // stores cursor location upon first click
  var moveX=0, moveY=0; // keeps track of overall transformation
  var lastMoveX=0, lastMoveY=0; // stores previous transformation (move)


function mouseDown(evt){
    evt.preventDefault();
    click=true;
    clickX = evt.clientX; 
    clickY = evt.clientY;
}

function move(evt){
evt.preventDefault();
if(click){
    moveX = lastMoveX + ( evt.clientX - clickX );
    moveY = lastMoveY + ( evt.clientY - clickY );
    evt.target.setAttribute("transform", "translate(" + moveX + "," + moveY + ")");
  }
}

function endMove(evt){
    click=false;
    lastMoveX = moveX;
    lastMoveY = moveY;
}

Answer 1

问题在于，当您快速移动鼠标时，光标可以暂时终止于框外，然后才能赶上该位置。这会导致onmouseout事件被触发，从而停止拖动。要解决此问题，您只需从svg对象中删除属性onmouseout="endMove(evt)"即可。

Answer 2

正如其他人所提到的，你需要调查你的endMove处理程序并清理那里的逻辑。

然而，简单地删除处理程序并不是相当的答案（因为如果你继续徘徊，你会发现自己有一种“生涩”的体验）。

以下是我推荐的两件事（有一个小提琴：http://jsfiddle.net/uUbRy/）

捕获具有焦点的元素。

在mouseDown中，我将elementWithFocus = evt.target设置为在您的mousemove处理程序中使用。

解决endMove问题。

为此，我使用以下条件检查更新了您的处理程序：

if(evt.type == 'mouseout' && click) {
    return;
}

SVG：拖动矩形只有在缓慢拖动时才有效

2 个答案: