Snap.svg中的嵌套可拖动元素 - 将元素排除为拖动句柄

Question

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

在下面的示例中，使用可拖动的Rectangle元素和Circle元素设置Group。 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();