拖動後SVG元素不在頂部

-1

我在屏幕中使用HighStock作爲圖表。我在隨機點上的系列中有不同的標誌。拖動後SVG元素不在頂部

我有一個要求將標誌拖放到圖表中的任何位置。

我可以拖動國旗，但是當我放下國旗時，我看不到它。標記元素仍然存在於它被放置的位置，如果您將鼠標懸停在該位置上，則可以看到圖標正在更改。

我想有覆蓋元素的問題？

2012-03-13 butter .

您能否澄清：圖表上可以拖放的「標誌」是什麼？我理解你的問題，並且（如下所示）可以告訴你一般如何解決它，但我無法專門重現它，因此不能建議如何實施解決方案。（如果這是你的「旗幟」，我不能拖動和移動「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的最後一個子矩形，在矩形等渲染後該組，但始終在繪製在角落頂部的黃色圓圈之前呈現。

來源

2012-03-13 21:59:02 Phrogz

感謝您的回覆。其實我有要求在系列的隨機點上有圖像。然後用戶可以將圖像拖放到圖表中的不同點上。爲此我試圖使用標誌拖放解決方案。你能建議我如何實現這一功能？我認爲Highstock呈現多個矩形元素在彼此之上來製作一個標誌，當我點擊一個標誌時，事件被觸發在最上面的元素上，只有這個元素被拖動。看看這個[鏈接]（http://jsfiddle.net/X7AHK/16/）。你可以請建議一個解決方案.. ??謝謝 – 2012-03-14 00:47:51

拖動後SVG元素不在頂部

回答

相關問題