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