-1

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

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

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

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

我猜有覆盖元素的问题？

4

1 回答 1

1

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

因此，如果要将项目移动到“顶部”，则需要在 DOM 中的另一点重新插入该项目。例如，看这个演示；拖动蓝色和红色框，使它们重叠，然后交替单击每个。这是由源代码中的第 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>在组中的另一个矩形之后渲染，但始终在绘制在角上的黄色圆圈之前渲染。

于 2012-03-13T21:59:02.107 回答