关于d3.js 将一个element 拖拽到另一个element的响应事件

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容器上。


最后问题顺利解决