标签：function 鼠标 resizable js 会卡顿 拖曳 iframe 拖拽

js写的鼠标拖拽事件，当鼠标滑到iframe区域时，会卡住。我理解的应该是因为iframe框中为加载别的页面，鼠标在iframe框时，相当于处在别的页面中，所以拖拽失效。

1.测试代码：

<div id="draggable">
    <iframe src="http://www.baidu.com"></iframe>
</div>

2.解决思路：拖曳时在iframe上方放置一个透明的图层用来覆盖，这样拖曳过程其实是在这个透明的图层上进行的，所以就不会存在卡顿问题

$("#draggable").resizable({
    helper: "widget_resizable_helper",
    start: function( event, ui ) {
        $("iframe").each(function() {
        　　 $("<div class='ui-resizable-iframeFix' style='background: #fff;'></div>")
            .css({
            width: this.offsetWidth+"px", height: this.offsetHeight+"px",
            position: "absolute", opacity: "0.001", zIndex: 1000
            })
            .css($(this).offset())
            .appendTo("body");
        });
    },
    stop:function(){
        $("div.ui-resizable-iframeFix").each(function() {
        this.parentNode.removeChild(this);
        });
    }
});

3.整体思路就是想方设法挡住iframe，暂时不知道iframe为什么会导致拖曳卡顿，所以请知晓原理的大神告知，万分感谢！

标签：function,鼠标,resizable,js,会卡顿,拖曳,iframe,拖拽
来源： https://blog.csdn.net/qq_29207823/article/details/97144165

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。