rt
正在做机柜可视化, 一个需求是能拖拽左侧列表的设备名称, 拖到右侧42U机柜中,并将设备图片放置在对应机柜位置上。
开始的时候一切都很顺利,点击左侧设备名称,添加一个g容器,将设备名称作为text节点放置在容器中。然后写好drag事件。
本意是等拖拽到机柜位置时,该机位会响应到鼠标的mouseover事件,但是没有,而且是鼠标单独移动的时候可以响应,但就是拖拽设备名称过去时候无法响应。
很快bing到问题所在
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容器上。
最后问题顺利解决