html5 drag 事件中 如何实时获取到 dom 阴影节点的 clientX clientY?

Question

框架: vue
期望:
在 html5 中 drag 的时候会产生一个阴影 dom,当我拖动过程中 松开鼠标,真实 dom 能准确定位到 阴影 dom 的位置.
直接上图,我点击移动按钮(在真实 dom 中)的时候 能在 @drag事件中获取到e

这个 e 是当前鼠标的一些布局信息,我现在的方案是 鼠标的 left - 移动按钮到真实 dom 的 left, 但是数据会有几个像素的偏差,被细心的产品发现了....
所以我想获取到 阴影的 dom 布局信息,请问是否有对应方法?或者有其他好的方案?

Answer 1

可以隐藏阴影DOM，通过设置 setDragImage 为一个透明图

dragbox.addEventListener('dragstart', function (ev) {
    var img = new Image();
    img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
    ev.dataTransfer.setDragImage(img, 0, 0);
}

可以参考这个 https://segmentfault.com/a/11...

Answer 2

当拖动元素到可放置区时会触发ondragover事件，里面的e就是阴影DOM。