0

我正在尝试在 HTML 5 页面中创建一个小的可拖动 SVG 矩形。我想做的是当我在 rect 元素上单击鼠标时捕获鼠标。不幸的是，setCapture 似乎不适用于 SVG 元素。是否有另一种方法可以获得对 HTML5 中鼠标事件的 Rect 的独占访问权限？

4

1 回答 1

1

您可以使用 addeventlisteners 。下面是使 svg 元素可拖动的示例：- （我使用属性来确保其唯一的 svg 元素）

document.addEventListener('mousedown',mousedownfunction,false);

var Selectedelement=null;

function mousedownfunction(event){

  if(event.target.hasAttribute('isdraggable'){
     Selectedelement=event.target;
     document.addEventListener('mousemove',mousemovefunction,false);
     document.addEventListener('mouseup',mouseupfunction,false);    
   }

}

function mousemovefunction(event){
  // move your element here (logic of dragging)
}

function mouseupfunction(event){
document.removeEventListener('mousemove',mousemovefunction,false);
document.removeEventListener('mouseup',mouseupfunction,false);
}

注意：-我还没有测试过，但它会起作用。确保在 rect 中设置属性“isdraggable”，即 <rect x=0 y=0 width=100 height=100 isdraggable='true' />

于 2013-08-19T17:52:35.840 回答