rt

正在做機櫃視覺化， 一個需求是能拖拽左側列表的裝置名稱， 拖到右側42U機櫃中，並將裝置圖片放置在對應機櫃位置上。

開始的時候一切都很順利，點選左側裝置名稱，新增一個g容器，將裝置名稱作為text節點放置在容器中。然後寫好drag事件。

本意是等拖拽到機櫃位置時，該機位會響應到滑鼠的mouseover事件，但是沒有，而且是滑鼠單獨移動的時候可以響應，但就是拖拽裝置名稱過去時候無法響應。

很快bing到問題所在

https://stackoverflow.com/questions/21523950/the-mouse-over-event-is-not-fired-during-the-drag-and-drop-action-in-d3-js

The problem is simply that the 'mouseover' event only gets triggered on the top-most element when two elements are painted one over top of each other.

That is true regardless of whether or not you are handling the mouse event for the top-most element.

Changing that behaviour is going to require considerable work-arounds, none of which are ideal.

大意就是兩個element相撞， mouseover只響應上層element的, 下層不會響應。很明顯機位就沒響應mouseover.

我用到的解決方案很簡單 就是連結中給出的第二條方案

給節點加入 pointer-events:none; 也就是我拖拽的text加入這一個style就ok了, 目的是讓text節點透明，這樣事件響應就直接跳過它，響應下層節點。

這個方案的前提是必須有g容器包著， 而且拖拽移動等事件要放在g容器上。


最後問題順利解決