当拖拽遇上iframe

拖拽遇上iframe的卡顿问题

我们在实现左右拖拽或着上下拖拽时，单纯的控制内容拖拽是不会发现任何拖拽不适问题，但是如有使用iframe获取渲染的内容时，导致拖拽没那么灵敏，出现卡顿问题。

我在这里的解决方案是： 在iframe的上层添加一个隐形的盒子，意思就是让我们拖拽的时候控制的是隐形的盒子为不是iframe本身。 但是如果你的内容中即便是用盒子把iframe包起来也是没有用的。

现在我就可以解决卡顿问题了；代码如下：

       <div>
          <iframe
            className={style.i}
            src="https://juejin.cn/post/6844903991134912519"
            width="100%"
            height="100%"
            allowpaymentrequest={'true'}
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms "
            scrolling="auto"
          />
          <div style={{width:'100%',height:'100%',position:'absolute',top:'0',left:'0',background:'lightBlue',opacity:'0.0001'}}/>
        </div>

这样我们就可以解决拖拽的卡顿问题了！！！

看似很完美，但是当你鼠标去滚动iframe渲染的页面的时候发现不动了，无法往下滚动，也无法点击里面的每个链接，跟禁用了一样。

如下图： 绿色代表拖拽线，红色区域鼠标无法触发

解决！！！

原来我们在触发的时候触发的是上层盒子，所以ifame渲染的页面在盒子下面，就无法再触发里面的任何事件。

这时我们可以把盒子的宽设置为30px，但是height一定是100%，否则卡顿问题依然存在。意思就是只要盒子与拖拽的线高度一样即可。

完整代码：

设置高度拖拽的原理类似

切记不可设置display：none

       <div>
          <iframe
            className={style.i}
            src="https://juejin.cn/post/6844903991134912519"
            width="100%"
            height="100%"
            allowpaymentrequest={'true'}
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms "
            scrolling="auto"
          />
          <div style={{width:'30px',height:'100%',position:'absolute',top:'0',left:'0',background:'lightBlue',opacity:'0.0001'}}/>
        </div>