首页 > Web开发 > 详细

原生JavaScript拖动div兼容多种浏览器

时间:2014-02-14 21:40:48      阅读:392      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
<html>
    <head>
        <script type="text/javascript">
        var x;
        var y;

        function $(id){  
            return document.getElementById(id)  
        }
        
        function mousedown(){
            x=event.clientX-$("px").style.pixelLeft;
            y=event.clientY-$("px").style.pixelTop;
            $("px").style.border="2px solid red";
            $("px").onmousemove = mousemove;
        }

        function mouseup(){
            $("px").onmousemove = "";
            $("px").style.border="";
        }

        function mousemove(){
            $("px").style.pixelLeft=event.clientX-x;
            $("px").style.pixelTop=event.clientY-y;
        }
         
        </script>
    </head>
    <body>
        <div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"
        onmousedown="mousedown()" onmouseup="mouseup()" >
        </div>
    </body>
</html>
bubuko.com,布布扣

 

  这是 forevercjl 的一种方法,我试了一下在IE8下正常,但是在最新的Chrome上却无法移动。看了下代码,发现使用了IE特有的 pixel*(如 pixelLeft 等属性),在

w3cschool.cn中我没有找到这个属性具体属于哪个分类,不过在 w3help.org上找到一篇介绍,如下:

 

BX9024: Firefox 不支持 DOM 元素 style 属性中的 pixel* 属性,并且某些情况下 Webkit 浏览器 pixel* 属性的返回值和 IE 中不同

问题描述

style 属性中以 pixel 字符开头的属性最初是 IE 浏览器私有的,他可能会导致如下兼容问题:
1. Firefox 不支持 style 属性中以 pixel 字符开头的属性;
2. Webkit 内核浏览器以 pixel 字符开头的属性返回值和 IE 中有差异。当值的单位是 "em" 时,Webkit 浏览器返回的值是没有经过 em 单位至 px 单位转换的数字。

造成的影响

使用 HTMLElement.style.pixel* 属性得到相应样式值会导致计算失误或脚本报错。

受影响的浏览器

Firefox Safari Chrome  

问题分析

HTMLElement.style.pixel* 属性最初是微软公司为 IE 4.0 以上浏览器制定的特性,他们都是非标准的。

 

  

  然后,我就一边熟悉 DOM style 属性,一遍查阅w3cschool 发现,在style属性里,关于定位的其实就只有这几个:

 

属性 描述 IE F O W3C
bottom 设置元素的底边缘距离父元素底边缘的之上或之下的距离 5 1 9 Yes
left 置元素的左边缘距离父元素左边缘的左边或右边的距离 4 1 9 Yes
position 把元素放置在static, relative, absolute 或 fixed 的位置 4 1 9 Yes
right 置元素的右边缘距离父元素右边缘的左边或右边的距离 5 1 9 Yes
top 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离 4 1 9 Yes
zIndex 设置元素的堆叠次序 4 1 9 Yes

 

然后下面就是只利用上面所有浏览器都支持的 style.left(返回的值包含单位) 和 style.top (返回的值包含单位)改写的。

注意:,该div应该为 绝对定位,且body内只有一个元素,因为 style.top 之类的属性,得到的是相对于父亲的距离,另外 必须给该div 元素的 top 和 left 属性赋值。

 

bubuko.com,布布扣
<html>
    <head>
    <script type="text/javascript">
        var x;
        var y;
        function $(id)
        {  
            return document.getElementById(id)  
        } 

        function mousedown()
        {
            x=event.clientX-parseInt($("px").style.left);//style.left返回值类似于:14px,需要parseInt
            //alert(x);
            y=event.clientY-parseInt($("px").style.top);
            //alert(y);
            $("px").style.border="2px solid red";
            $("px").onmousemove = mousemove;
        }

        function mouseup()
        {
            $("px").onmousemove = "";
            $("px").style.border="";
        }

        function mousemove()
        {
            $("px").style.left=(event.clientX-x)+"px";//left属性值最好带上明确的px单位
            $("px").style.top=(event.clientY-y)+"px";
        }
     
    </script>
    </head>

    <body>
        <div id="px" style="position:absolute; left:100px; top:100px; height:100px; width:100px; background-color:#FF0;"
                onmousedown="mousedown()" onmouseup="mouseup()" >
        </div>
    </body>
</html>
bubuko.com,布布扣

原生JavaScript拖动div兼容多种浏览器

原文:http://www.cnblogs.com/muyun/p/3548753.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!