我正在尝试在组内实现群体和个体拖动。在该组中有3个圆圈。蓝色和灰色圆圈必须单独拖动(通过 onmousedown),而橙色圆圈用于群体移动(通过 onclick)。
问题是,在拖动整个组之后,你需要尝试访问http://www.atarado.com/stackOF/drag-with%20problems.svg并查看代码。
任何帮助将不胜感激。谢谢。
我正在尝试在组内实现群体和个体拖动。在该组中有3个圆圈。蓝色和灰色圆圈必须单独拖动(通过 onmousedown),而橙色圆圈用于群体移动(通过 onclick)。
问题是,在拖动整个组之后,你需要尝试访问http://www.atarado.com/stackOF/drag-with%20problems.svg并查看代码。
任何帮助将不胜感激。谢谢。
我想我已经解决了你的问题:https://codepen.io/petercollingridge/full/djBjKm/
问题在于单个拖动会改变圆形的cx和cy属性,但组拖动会影响整个组的变换。我简化了一切,使用变换使其全部工作,并且你只需要一个函数集即可:
function startMove(evt, moveType){
x1 = evt.clientX;
y1 = evt.clientY;
document.documentElement.setAttribute("onmousemove","moveIt(evt)")
if (moveType == 'single'){
C = evt.target;
}
else {
C = evt.target.parentNode;
}
}
function moveIt(evt){
translation = C.getAttributeNS(null, "transform").slice(10,-1).split(' ');
sx = parseInt(translation[0]);
sy = parseInt(translation[1]);
C.setAttributeNS(null, "transform", "translate(" + (sx + evt.clientX - x1) + " " + (sy + evt.clientY - y1) + ")");
x1 = evt.clientX;
y1 = evt.clientY;
}
function endMove(){
document.documentElement.setAttributeNS(null, "onmousemove",null)
}
Uncaught ReferenceError: evt is not defined at HTMLHtmlElement.onmousemove
。 - blackgreen