Question

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

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

我可以拖动旗帜但是当我放下旗帜时，我看不到它。标志元素仍然存在于被删除的位置，如果你将鼠标悬停在该位置，你可以看到图标正在变化。

我猜有重叠元素的问题？

Answer 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中的最后一个子项，在该组中的另一个矩形之后渲染，但始终在角落顶部绘制的黄色圆圈之前渲染

拖动后SVG元素不在顶部

1 个答案: