开发者社区> 技术小美> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

简介:
+关注继续查看

前言

不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggable进行了处理——添加了iframeFix属性设置(iframe:true时候就可以解决),但是却没有为resizable添加这个属性(实在费解,这个为毛啊)。

问题

jQuery UI resizble的div包含iframe导致缩放的不平滑解决(通过helper可观察到缩放非常不平滑)

测试代码

HTML:

 

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

 

CSS:

 

复制代码
#draggable { width: 800px; height: 500px; }
iframe{  width: 100%; height: 100%;}
.widget_resizable_helper{
    border:3px solid #A29B9B;
    z-index:999999 !important;
}
复制代码

 

JS:

$("#draggable").resizable( { helper: "widget_resizable_helper"});

解决思路

 

思路一:用在开始进行缩放(触发了resizable的start事件)为iframe添加z-index属性,将iframe放置在最下层。

复制代码
$("#draggable").resizable({
    helper: "widget_resizable_helper",
    start: function( event, ui ) {
        $("#draggable").css({position:"relative","z-index":-1});
        $("iframe").css({position:"relative","z-index":-2});
    },
  stop:function(){
     $("#draggable").css({position:"absolute","z-index":1000});//尘归尘,土归土,设回正常状态下的属性
     $("iframe").css({"z-index":1001});
}
});
复制代码

这个做法在chrome和firefox有效,但在IE下无效(缩放拉到iframe里面还是会一卡一卡的,蛋疼啊)。

问题原因:细心的人估计发现了,其实设置z-index是有效的,但为什么效果像是z-index无用呢。凶手就是——IE穿透了

具体原因就是—— IE中如果两个div有层叠关系,上层的div没有内容和背景图片,当鼠标在两个div重叠部分的时候,会触发下层div的mouseover事件(IE),从而触发上层div的mouseleave事件,也就是说,上层的div被穿透了。 

所以示例在IE上就出现:有些元素被遮挡了(z-index起效了),但a标签因IE穿透可以被触发事件,所以在resizing的时候就会因为iframe里面的a标签被触发而一卡一卡的。

结果:这种解决思路不大行,果断放弃。

思路二在我灵机一动下,突然意识到draggable已经解决了iframe影响的问题,那我能不能借鉴draggable里的iframefix

 

复制代码
$("#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);
        });
    }
});
复制代码

 

结果:神奇的解决了,chrome、firefox、IE等,竟然都非常平滑,果然它山之石可以攻玉。

解决思路就不在这里班门弄斧了,大家看看也就明白了。

还存在问题——draggable

在上面我说过,jQuery UI 对draggable的iframefix下面这种解决思路。

 

复制代码
$("iframe").each(function() {
  $("<div class='ui-draggable-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");
});
复制代码

 

这对draggable有很大问题——拖动还是会卡的,而且非常明显。

原因就是  .css($(this).offset()) 和 width: this.offsetWidth+"px", height: this.offsetHeight+"px"这个设置,遮挡层大小和位置就仅仅是原先iframe的大小和位置。如果鼠标边拖动iframe边离开遮挡层,会有很明显一卡一卡的情况,因为遮挡层外没有遮挡,iframefix这东西就废啦!!!!!

哈哈哈,是不是觉得坑叻。

不过还是有几个解决方法:

思路一:使用helper,当helper移到指定位置再设置iframe的位置。

复制代码
$widgetObj.draggable({          
    helper:function(){
      return '<div style="width:'+w+'px;height:'+h+'px;z-index:'+1001+';background:black;opacity:0.4;"></div>';
    },
    iframeFix: true,
    stop:function(event,ui){
        $widgetObj.css({'top':ui.position.top,'left':ui.position.left});
    }
}) ;
复制代码

思路二:不使用iframeFix。自己设置遮挡层,将遮挡层大小设为body的长宽,位置设置为top:0;left:0,

 

复制代码
$("#draggable").draggable({
    start: function( event, ui ) {
        $("iframe").each(function() {
        $("<div class='ui-draggable-iframeFix' style='background: #fff;'></div>")
            .css({
            width: document.body.scrollWidth+"px", height: document.body.scrollHeight +"px",
            position: "absolute", opacity: "0.001", zIndex: 1000,
            top: 0,left: 0
            })
            .appendTo("body");
        });
    },
    stop:function(){
        $("div.ui-draggable-iframeFix").each(function() {
        this.parentNode.removeChild(this);
        });
    }
});
复制代码

两种思路我偏向第一种用法,效果比第二种好,第二种虽然不会卡,但是有像页面被全选的情况。

 

 


本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/3367322.html   ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
.NET6新东西---System.Text.Json Writeable DOM
.NET6新东西---System.Text.Json Writeable DOM
22 0
写给Java后端的ReactJS快速入门教程-ES6中的class类关键字
写给Java后端的ReactJS快速入门教程-ES6中的class类关键字
20 0
不敢相信!JDK 8 的 HashMap 依然会死循环…
是否你听说过JDK8之后HashMap已经解决的扩容死循环的问题,虽然HashMap依然说线程不安全,但是不会造成服务器load飙升的问题。
42 0
MySQL 关联多表查询更新例子 & from LOW B
update change_request cr inner join application app on cr.app_name = app.app_name inner join aone_product p on p.
732 0
maven eclipse 编译错误 Dynamic Web Module 3.0 requires Java 1.6 or new
  新建项目出现 Dynamic Web Module 3.0 requires Java 1.6 or new    编译器的java版本不同导致       解决方法:pom添加 这段,eclpise 一下   org.
848 0
eclipse自动部署web项目时WEB-INF\lib目录下缺少maven依赖jar包
右键点击工程,属性(properties),选择deployment assembly选项,单击add按钮,如下图: 在弹出的对话框选择java build path entries next后选择Maven Dependencies即可 参考文章: http://www.thinksaas.cn/group/topic/337249/   本文出自 “点滴积累” 博客,
1340 0
+关注
6819
文章
0
问答
文章排行榜
最热
最新