拖动后SVG元素不在顶部

问题描述：

我在屏幕中使用HighStock作为图表。我在随机点上的系列中有不同的标志。拖动后SVG元素不在顶部

我有一个要求将标志拖放到图表中的任何位置。

我可以拖动国旗，但是当我放下国旗时，我看不到它。标记元素仍然存在于它被放置的位置，如果您将鼠标悬停在该位置上，则可以看到图标正在更改。

我想有覆盖元素的问题？

您能否澄清：图表上可以拖放的“标志”是什么？我理解你的问题，并且（如下所示）可以告诉你一般如何解决它，但我无法专门重现它，因此不能建议如何实施解决方案。（如果这是你的“旗帜”，我不能拖动和移动“On Series”项目。） – Phrogz 2012-03-13 22:02:09

答

SVG使用"painters model"进行渲染，这意味着源代码/ DOM中较早出现的元素可以始终由稍后出现在源/ DOM中的项目绘制。（这与HTML具有z-index属性以允许重新排序项目形成对比）。

因此，如果要将项目移动到“顶部”，则需要将项目重新插入另一个项目指向DOM。例如，请参见this demo;拖动蓝色和红色框，使它们重叠，然后交替地点击每一个。这是通过线94的源代码来实现：

el.parentNode.appendChild(el); // move to top

注释有些误导，只要该元素不会移动到绝对顶部，而是在最后所有的兄弟姐妹的绘制。如果你看一下源DOM，你会看到（简体）：

<svg ...> 
    <g transform="scale(1.2,0.8)"> 
    <rect class="drag resize" ... fill="#c66"/> 
    <rect class="drag resize" ... fill="#69c"/> 
    </g> 
    <circle class="drag sizer" ... r="5"/> 
    <circle class="drag sizer" ... r="5"/> 
</svg>

因此，当你点击它被重新排序是在<g> roup的最后一个子矩形，在矩形等渲染后该组，但始终在绘制在角落顶部的黄色圆圈之前呈现。

感谢您的回复。其实我有要求在系列的随机点上有图像。然后用户可以将图像拖放到图表中的不同点上。为此我试图使用标志拖放解决方案。你能建议我如何实现这一功能？我认为Highstock呈现多个矩形元素在彼此之上来制作一个标志，当我点击一个标志时，事件被触发在最上面的元素上，只有这个元素被拖动。看看这个[链接]（http://jsfiddle.net/X7AHK/16/）。你可以请建议一个解决方案.. ??谢谢 – 2012-03-14 00:47:51

拖动后SVG元素不在顶部

相关推荐