拖动后SVG元素不在顶部答案

【问题标题】：SVG element not on top after drag拖动后SVG元素不在顶部
【发布时间】：2012-03-13 10:33:16
【问题描述】：

我在屏幕上使用 HighStock 制作图表。我的系列在随机点上有不同的标志。

我需要将标志拖放到图表中的任何位置。

这是http://jsfiddle.net/X7AHK/13 的小提琴。

我可以拖动旗帜，但是当我放下旗帜时，我看不到它。标志元素仍然在它被丢弃的地方，如果你将鼠标悬停在那个地方你可以看到图标发生变化。

我猜是覆盖元素有问题？

【问题讨论】：

您能否澄清一下：图表上可以拖放的“标志”是什么？我了解您的问题，并且（如下所示）可以大致告诉您如何解决它，但我无法具体重现它，因此无法建议如何实施解决方案。（如果那是您的“标志”，我无法拖动和移动“On Series”项目。）

标签： drag-and-drop svg highcharts highstock

【解决方案1】：

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

因此，如果要将项目移动到“顶部”，则需要在 DOM 中的另一点重新插入该项目。例如见this demo；拖动蓝色和红色框，使它们重叠，然后交替单击每个。这是通过源代码中的第 94 行完成的：

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

评论有点误导，因为元素没有移动到绝对的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 将多个矩形元素相互叠加以制作一个标志，当我单击一个标志时，该事件会在最顶部的元素上触发，并且只有那个被拖动。看看这个link。你能提出一个解决方案吗..？谢谢