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

浏览数：82 / 时间：2015年06月09日

<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>

　　这是 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 以上浏览器制定的特性，他们都是非标准的。

Firefox Safari Chrome

　　然后，我就一边熟悉 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 属性赋值。

<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>