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

  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.         var x;
  5.         var y;
  6.  
  7.         function $(id){
  8.             return document.getElementById(id)
  9.         }
  10.  
  11.         function mousedown(){
  12.             x=event.clientX-$("px").style.pixelLeft;
  13.             y=event.clientY-$("px").style.pixelTop;
  14.             $("px").style.border="2px solid red";
  15.             $("px").onmousemove = mousemove;
  16.         }
  17.  
  18.         function mouseup(){
  19.             $("px").onmousemove = "";
  20.             $("px").style.border="";
  21.         }
  22.  
  23.         function mousemove(){
  24.             $("px").style.pixelLeft=event.clientX-x;
  25.             $("px").style.pixelTop=event.clientY-y;
  26.         }
  27.  
  28.         </script>
  29.     </head>
  30.     <body>
  31.         <div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"
  32.         onmousedown="mousedown()" onmouseup="mouseup()" >
  33.         </div>
  34.     </body>
  35. </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新增）。

  1. <html>
  2.     <head>
  3.     <script type="text/javascript">
  4.         var x;
  5.         var y;
  6.         function $(id)
  7.         {
  8.             return document.getElementById(id)
  9.         } 
  10.  
  11.         function mousedown()
  12.         {
  13.             x=event.clientX-parseInt($("px").style.left);//style.left返回值类似于：14px,需要parseInt
  14.             //alert(x);
  15.             y=event.clientY-parseInt($("px").style.top);
  16.             //alert(y);
  17.             $("px").style.border="2px solid red";
  18.             $("px").onmousemove = mousemove;
  19.         }
  20.  
  21.         function mouseup()
  22.         {
  23.             $("px").onmousemove = "";
  24.             $("px").style.border="";
  25.         }
  26.  
  27.         function mousemove()
  28.         {
  29.             $("px").style.left=(event.clientX-x)+"px";//left属性值最好带上明确的px单位
  30.             $("px").style.top=(event.clientY-y)+"px";
  31.         }
  32.  
  33.     </script>
  34.     </head>
  35.  
  36.     <body>
  37.         <div id="px" style="position:absolute; left:100px; top:100px; height:100px; width:100px; background-color:#FF0;"
  38.                 onmousedown="mousedown()" onmouseup="mouseup()" >
  39.         </div>
  40.     </body>
  41. </html>

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

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

原生JavaScript拖动div兼容多种浏览器的更多相关文章

  1. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  2. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  3. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  4. javascript点击兼容所有浏览器封装

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 简单的鼠标可拖动div 兼容IE/FF

    来源:http://www.cnblogs.com/imwtr/p/4355416.html 作者: 主要思路: 一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度 ...

  6. iframe自适应高度(兼容多种浏览器)

    http://jingyan.baidu.com/article/b87fe19eaeb2cf5218356896.html 让iframe自适应高度,下面是实现的源码: <div id=&qu ...

  7. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. [代码收藏]设为首页和加入收藏的JavaScript代码（兼容多浏览器）

    其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能,因此说是兼容,其实只是一个try,catch后的提醒而已. 加入收藏: /* * author : 2010-12-27 11 ...

  9. window.url.createobjecturl 兼容多种浏览器（IE,google,360,Safari,firefox）

    <script type="text/javascript"> function setImagePreview() { var docObj = document.g ...

随机推荐

  1. 9.26 noip模拟试题

    魔术球问题弱化版(ball.c/.cpp/.pas) 题目描述 假设有 n 根柱子,现要按下述规则在这 n 根柱子中依次放入编号为 1,2,3,…的球. (1)每次只能在某根柱子的最上面放球. (2) ...

  2. 用GitHub Pages免费空间搭建Blog

    前言   其实之前就知道可以用GitHub Pages搭建静态博客,不过之前一直忙着爬手册撸代码==,昨天终于把前端各种手册里的入门教程撸的差不多了(CSS布局撸的我要吐了好嘛),于是把代码什么的放一 ...

  3. Ant工具

    Ant工具 Ant是一种基于Java的build工具.理论上来说,它有些类似于(Unix)C中的make ,但没有make的缺陷.目前的最新版本为:Ant 1.9.4[1] .   Ant的概念 当一 ...

  4. hadoop之wordCount程序理解

    有篇文章http://www.cnblogs.com/xia520pi/archive/2012/05/16/2504205.html中介绍的

  5. [原创] Fragment的添加、移除问题

    安卓一直在进化,Fragment就是个好东西,如果早5年做安卓开发,真要麻烦的多. 关于Fragment的讲解,这里很详尽: Android Fragment 真正的完全解析(上) Android F ...

  6. 【BZOJ1500】【块状链表】维修数列

    Description Input 输入文件的第1行包含两个数N和M,N表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一条命令,格式参见问题描述 ...

  7. 命令模式(Command)

    1.本质: 封装请求 2.定义: 把一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化,对请求排队或记录请求日志,以及支持可撤销的操作 3.核心: 原本“行为请求者”和“行为执行者”是紧紧 ...

  8. linxu 挂载分区

    1. 添加新硬盘 设置 -> Storage -> SATA控制器->右击,选择“添加虚拟硬盘” 然后,根据需求创建合适的硬盘 2. 重启虚拟机 查看现有系统的磁盘空间 sudo f ...

  9. 【JQuery学习历程】2.JQuery选择器

    基本选择器 选择器 描述 返回 示例 #id 根据给定的id匹配元素 单个元素 $("#myId") .class 根据给定的class类匹配元素 集合元素 $(".my ...

  10. C#DateTimePicker设置自定义格式

    摘自Microsoft TechNet DateTimePicker.CustomFormat 属性 包含日期和时间分隔符的显示字符串文字或格式字符串,必须在子字符串中使用转义符. 例如,若要显示将日 ...