SVG组的拖动

Question

我正在尝试在组内实现群体和个体拖动。在该组中有3个圆圈。蓝色和灰色圆圈必须单独拖动（通过 onmousedown），而橙色圆圈用于群体移动（通过 onclick）。

问题是，在拖动整个组之后，你需要尝试访问http://www.atarado.com/stackOF/drag-with%20problems.svg并查看代码。

任何帮助将不胜感激。谢谢。

- Alex

---

链接包含您的文件已经失效，请重新上传？它被存档在这里：https://web.archive.org/web/20120221161712/http://www.atarado.com:80/stackOF/drag-with%20problems.svg - O0123

Answer 1

我想我已经解决了你的问题：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)
}

现在您可以调用 startMove(evt, 'single') 来移动单个对象，或者调用 startMove(evt, 'group') 来移动其所属的组。

- Peter Collingridge

---

非常感谢。这正是我需要的，底层简单明了。目前唯一的缺点是没有Firefox支持（再次）。它在Chromium下表现出色，在Midori和Chrome上不能在localhost上工作！！？有一些“黑魔法”我必须去探索（Linux Mint操作系统）。无论如何Peter，感谢您的即时响应，并在您的网页上提供了不错的教程。 - Alex

@PeterCollingridge 您的文件所在的Dropbox链接已失效，请重新上传？它可以在这里找到存档：https://web.archive.org/web/20111219015048/https://dl.dropbox.com/u/169269/group_drag.svg - O0123

链接的 CodePen 似乎出了问题，Uncaught ReferenceError: evt is not defined at HTMLHtmlElement.onmousemove。 - blackgreen