zoukankan      html  css  js  c++  java
  • 绝对定位不脱离文档流的方法

        最近在做移动页面开发,其中要实现对页面元素进行拖动,很多地方都使用表格来固定,使增加拖动事件的元素,即使受到绝对定位的影响,也总是还会自己的单元格内。

        而其中一类情况,比较特殊,是对图片的拖动,图片是不一样大的,也不能改成一样大,都应该挤在 div 内,页面加载完成后,使用 jquery.pep.js 给每个图片增加拖动,发现其中一个一增加拖动,

    其他的全部都因为受到插件将 默认定位 转换成 绝对定位,当其中1个 一旦转换成了绝对定位,这样其他的当也要转绝对定位的时候,因为前面的图片脱离文档流,后面又跟上来。。。麻烦,图片都寄叠加到一块了。。。

        想了半天,都知道该怎么解决? 给图片增加点击事件,然后通过事件来增加拖动。。试了下,不好使,有点问题。

        百度找了下,有的说,给图片增加 margin ,padding ,有的说再加一个相同大小的元素,给它撑开。。。 想了,那样都很是麻烦。。。

        终于想到一个好办法,分享出来:可以在页面加载之前就是用默认定位,加载完成之后,自己先对所有要进行绝对定位的元素,都设一遍,都设成 绝对定位,这样的话,既能看上去还是老样子,像没有脱离文档流一样,又能在不影响显示效果的情况下实现功能。

        以下代码:传入一个父元素,将父元素下所有的绝对定位获取出来,先存起来,然后再遍历一遍,都一个都设成绝对定位。

        

            function changeToAbsPosition(parent) {
                var arr = $(parent).children();
                var arrPos = new Array();
                for (var j = 0; j < arr.length; j++) {              
                    var ofs = $(arr[j]).offset();
                    var top = ofs.top;
                    var left = ofs.left;
                    arrPos.push({ "position": "absolute", "top": top + "px", "left": left + "px" });
                }
                for (var j = 0; j < arrPos.length; j++) {               
                    $(arr[j]).css(arrPos[j]);
                }
            }

        

  • 相关阅读:
    给目录下所有文件与文件夹加权限
    应用程序无法正常启动0xc000007b解决方法
    文件关联修复方法
    xz压缩文件方法
    sharding-jdbc实现水平分库 + 水平分表
    Sharding-jdbc实现水平分表
    批量删除Maven本地仓库中未下载完成的jar包(不完整的jar包)
    分库分表
    尚硅谷 ShardingSphere
    SpringBoot 整合ActiveMQ
  • 原文地址:https://www.cnblogs.com/lztkdr/p/About_AbsPosition.html
Copyright © 2011-2022 走看看