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

时间:2023-03-08 16:20:11
关于d3.js 将一个element 拖拽到另一个element的响应事件

rt

正在做机柜可视化, 一个需求是能拖拽左侧列表的设备名称, 拖到右侧42U机柜中,并将设备图片放置在对应机柜位置上。

开始的时候一切都很顺利,点击左侧设备名称,添加一个g容器,将设备名称作为text节点放置在容器中。然后写好drag事件。

本意是等拖拽到机柜位置时,该机位会响应到鼠标的mouseover事件,但是没有,而且是鼠标单独移动的时候可以响应,但就是拖拽设备名称过去时候无法响应。

很快bing到问题所在

https://*.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容器上。

最后问题顺利解决