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

  说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的。我又从 chinaunix 回来了。

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

  

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

 

属性描述IEFOW3C
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 属性赋值(经过2个星期的JS学习后,回头看时发现这里说的不全面,应该是“必须给该div在style=""中设置top和left才能使用JS的xx.style.top和xx.style.left这种方法访问,否则返回空字符串,详细原因见这篇博文第4部分”,2014年2月25日 21:12:00新增)。

 

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

 

水平所限,有问题还望多多指正啊,不敢误人子弟。

另外也提醒大家看博客文章,莫轻信,实践出真理。

posted @ 2014-02-13 22:28  HolyGrail  阅读(567)  评论(0编辑  收藏  举报
设计良好的程序将用户的注意力视为有限的宝贵资源,只有在必要时才要求使用。 ——《Unix编程艺术》