javascript SVG拖动组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7777010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG dragging for group
提问by Alex
I am trying to achieve group and individual dragging inside the group. In the group there are 3 circles. Blue and grey circles has to drag individually (by onmousedown), and orange one is for group moving (by onclick). The problem is that after dragging whole group, but you have to try at http://www.atarado.com/stackOF/drag-with%20problems.svgand see code.
我正在尝试在组内实现组和个人拖动。在组中有3个圆圈。蓝色和灰色圆圈必须单独拖动（通过 onmousedown），橙色圆圈用于组移动（通过 onclick）。问题是在拖动整个组后，您必须尝试在http://www.atarado.com/stackOF/drag-with%20problems.svg 上查看代码。
Any help would be appreciate. Thanks.
任何帮助将不胜感激。谢谢。
回答by Peter Collingridge
I think I've fixed your problem: https://codepen.io/petercollingridge/full/djBjKm/
我想我已经解决了你的问题：https: //codepen.io/petercollingridge/full/djBjKm/
The issue was that the single dragging was altering the circle's cx and cy attributes, but the group drag was effecting the transformation of the whole group. I've simplified things so it all works using transformations and you only need a single set of functions for both:
问题是单个拖动改变了圆的 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)
}
Now you call startMove(evt, 'single') to move an single object, or startMove(evt, 'group') to move the group it belongs to.
现在您调用 startMove(evt, 'single') 移动单个对象，或调用 startMove(evt, 'group') 移动它所属的组。
