原生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属性里,关于定位的其实就只有这几个:
属性 | 描述 | 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 属性赋值(经过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>
水平所限,有问题还望多多指正啊,不敢误人子弟。
另外也提醒大家看博客文章,莫轻信,实践出真理。