1

使用 Snap.svg，我想使可拖动组中的某些元素也可以单独拖动 - 但是当拖动这些子可拖动元素时，不应将父组作为一个整体拖动。换句话说，我需要从组的拖动句柄中排除组的某些子元素。

在下面的示例中，组设置有一个可拖动的 Rectangle 元素和一个 Circle 元素。Rectangle 是可拖动的子元素，Circle 是不可拖动的子元素。父组本身是可拖动的，因此使圆圈成为拖动整个组的手柄。我想让它这样可拖动的矩形不能用于拖动整个组，但同时保持组的成员，以便在使用圆圈拖动组时包含它。

当您使用矩形移动所有内容时，您可以看到被拖动的矩形和被拖动的组的奇怪行为。

如何将矩形排除在用于拖动其父组的同时允许单独拖动它？

jsfiddle 示例：http: //jsfiddle.net/EDT9J/

HTML 代码：

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

Javascript/ Snap.svg 代码：

var s = Snap("#svg");

var draggableChildBlock = s.rect(150, 150, 100, 100, 20, 20);
draggableChildBlock.attr({
    fill: "rgb(236, 240, 241)",
    stroke: "#1f2c39",
    strokeWidth: 3
});

var circleDragHandleForParentGroup = s.circle(280,280,20);

var draggableParentGroup = s.g(circleDragHandleForParentGroup,draggableChildBlock);

draggableChildBlock.drag();
draggableParentGroup.drag();
4

0 回答 0