如何解决在 iframe 上拖拽元素，无法正确放置的问题

[yangchch6]

需求

• modal组件支持可拖拽能力

方案

• 基于bee-dnd组件实现模态框的拖拽

遇到的问题

• 当可移动组件在iframe上浮动时，拖放行为将粘附在鼠标上。
• 拖拽的交互和效果和h5原生拖拽一致，没有达到预期的Dnd组件的效果。
• 具体效果如下：

探究原因

• Dnd组件基于react-draggable插件实现，于是我去翻看了下他们github上的issues，并找到了类似的提问

• 因为iframe的原因，在iframe上松掉鼠标，捕获不到document.onmouseup事件

解决方法

• 当拖拽动作开始时，设置pointer-events:none，让元素不再是鼠标事件的target，鼠标不再监听当前层而去监听下面的层中的元素。

.react-draggable-transparent-selection * { 
    pointer-events: none !important;
}

参考文档

• 你如何使iframe有指针事件但不是在里面的div？
• 详解css3 pointer-events（阻止hover、active、onclick等触发事件来