ドラッグ後にSVG要素が上にならない

Question

私は、画面内のチャートにHighStockを使用しています。私はランダムな点で私のシリーズに異なるフラグを持っています。

グラフのどこにでもフラグをドラッグアンドドロップする必要があります。

ここのフィドルはhttp://jsfiddle.net/X7AHK/13です。

フラグをドラッグすることはできますが、フラグを削除すると表示されません。フラグ要素は、その場所にマウスオーバーするとアイコンが変化するのを見ることができる場合、ドロップされた場所にまだそこにあります。

要素のオーバーレイに問題がありますか？

Answer 1

SVGはレンダリングに"painters model"を使用しています。つまり、ソースコード/ DOMの後ろにある要素は、ソース/ DOMの後に表示される項目によって常に引き継ぐことができます。 （これは、アイテムの並べ替えを許可するためにz-indexプロパティを持つHTMLとは対照的です）。

したがって、アイテムを「トップ」に移動するには、アイテムを別のアイテムに再挿入する必要があります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>競売で最後の子であることを並べ替えされた矩形をクリックすると、他の矩形内の後にレンダリングそのグループの上に描画されますが、常にコーナーの上に描画される黄色の円の前にレンダリングされます。