当鼠标拖曳事件碰到iframe(卡死了)

时间: 2024-11-10 admin IT培训

当鼠标拖曳事件碰到iframe(卡死了)

当鼠标拖曳事件碰到iframe(卡死了)

转载自:.html

1.测试代码:

<div id="draggable"><iframe src=""></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为什么会导致拖曳卡顿,所以请知晓原理的大神告知,万分感谢!