来源：http://www.cnblogs.com/imwtr/p/4355416.html

作者：

主要思路：

一个div，注册监听onmousedown事件，然后处理获取的对象及其相关值（对象高度，clientX/clientY位置等）

并继而转为监测onmousemove事件，在鼠标移动事件中更新div对象的位置属性

鼠标松开的时候解除监听，更新位置完成。

需要注意的两点：

1.更新对象的位置需要用到o.style.left等，这些CSS属性只能内嵌才能被访问到：

  1. <div id="box" style="left:200px;top:200px;"> box </div>

放在<style></style>中是无法访问的，比如：

  1. #box{position: absolute;left:200px;top:200px;width: 200px;}

假如这样做，显示的是无法获取值，请看举例：

  1. //    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);

这样的结果为 ：（详情看后边代码）

2. FireFox中是不能直接取event对象的，一般我们都会简单地使用 e = e || event 来区分，其中e是相应于FF中函数的参数部分

比如：

  1. document.getElementById("box").onmousedown = function(e)
    {
  2.     getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE
  3. };

当然有些时候也可以这样考虑：使用全局对象arguments[0]来替代捕获到的事件参数

  1. //    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件，听说可以通过 arguments[0]获取FF下的事件对象

对于拖拽事件这里使用到了另外一种常用的方法：

  1. // document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉
  2.         document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  
  3.  
  4. // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉
  5.         document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

最后是一个可随鼠标拖动的div

代码，有注释,希望能理解：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>Examples</title>
  6.  <meta name="description" content="">
  7.  <meta name="keywords" content="">
  8.  <link href="" rel="stylesheet">
  9.  <style type="text/css">
  10.      #box{position: absolute;left:200px;top:200px;width: 200px;border:1px solid #333;height: 200px;background-color: #009cc9;text-align: center;}
  11.  </style>
  12.  </head>
  13.  <body>
  14.      <div class="wrap">
  15.          <div id="box" style="left:200px;top:200px;"> box </div>
  16.      </div>
  17.      <script type="text/javascript">
  18.      var o,   //捕获到的事件
  19.            X,  //box水平宽度
  20.            Y;  //box垂直高度
  21.      function getObject(obj,e){    //获取捕获到的对象
  22.          o = obj;
  23.          // document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉
  24.          document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
  25.          X = e.clientX - parseInt(o.style.left);   //获取宽度，
  26.          Y = e.clientY - parseInt(o.style.top);   //获取高度，
  27.      //    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);
  28.      }
  29.      document.getElementById("box").onmousedown = function(e){
  30.          getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE
  31.      };
  32.      document.onmousemove = function(dis){    //鼠标移动事件处理
  33.          if(!o){    //如果未获取到相应对象则返回
  34.              return;
  35.          }
  36.          if(!dis){  //事件
  37.              dis = event ;
  38.          //    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件，听说可以通过 arguments[0]获取FF下的事件对象
  39.          }
  40.          o.style.left = dis.clientX - X +"px";     //设定box样式随鼠标移动而改变
  41.          o.style.top = dis.clientY - Y + "px";
  42.      };
  43.      document.onmouseup = function(){    //鼠标松开事件处理
  44.          if(!o){   //如果未获取到相应对象则返回
  45.              return;
  46.          }
  47.          // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉
  48.          document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
  49.          o = '';   //还空对象
  50.      };
  51.      </script>
  52.  </body>
  53.  </html>

简单的鼠标可拖动div 兼容IE/FF的更多相关文章

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

    说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...

  2. JS实现鼠标滚动事件，兼容IE9,FF,Chrome.

    <!-- 废话不多说,直接贴代码 --><script type="text/javascript" src="jquery.min.js"& ...

  3. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  4. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  5. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  6. [可拖动DIV]刚开通博客顺便就写了点东西！

    说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...

  7. VUE001. 拖动div盒子（自定义指令v-directives）

    拖动div是一个逻辑很简单的需求,监听容器的鼠标按下松开的事件,执行函数通过DOM改变标签的CSS偏移量. 在VUE构建的项目中,通过标签的 @mousedown 和 @mouseup 赋予行为事件, ...

  8. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  9. JS拖动DIV布局

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

随机推荐

  1. 20145224&20145238 《信息安全系统设计基础》第二次实验

    20145224&20145238 <信息安全系统设计基础>第二次实验 课程:信息安全系统设计基础 班级:1452 姓名:陈颢文 荆玉茗 学号:20145224 20145238 ...

  2. MVP -----个人理解与示例（android例子 实现）

    MVP 也就是Model View Presenter模式,是建立一个工程的一种模式. ======================================================== ...

  3. 两种PHP生成二维码的方法

    PHP生成二维码,个人认为最常用的有两种,1.使用google的api生成,2.使用PHP QR Code生成,两种方法生成的二维码都是很清淅的,效果不错.下面来分别说明这两种方法如何实现. 一.PH ...

  4. 关于电脑安装多个版本JDK后使用时的切换

    描述:刚到新公司,自己安装了jdk1.7和开发工具myeclipse10,但是由于公司项目的需要(具体原因不详细描述了),需要使用myeclipse6.5和jdk1.6.于是在切换jdk1.7和jdk ...

  5. 类库、委托、is as运算符、泛型集合

    类库: 说白了,就是让别人调用你写的方法,并且不让别人看到你是怎么实现的. 如果有功能你不会做,需要别人帮忙,那么你的同事可以帮你写好一个类,然后你来调用这个类中的方法,完成你的项目. 1.C#源代码 ...

  6. linux 基本命令操作

    1.ls 命令 ls -a  列出所有文件,包括隐藏文件 ls -l  列出文件详细信息 ls -r 列出所有文件包括文件夹 查询具体文件可以在命令后面加  |grep 要匹配的字符串,方便我们查找, ...

  7. jQuery 源码中的 camelCase

    先看一下源码 //65-72行 // Matches dashed string for camelizing //匹配连字符 ‘-’ 和其后的第一个字母或数字,如果是字母,则替换为大写,如果是数字, ...

  8. bzoj 3109: [cqoi2013]新数独

    #include<cstdio> #include<iostream> using namespace std; ][],li[][],xi[][],a[][],bh[][], ...

  9. 为speedphp最新版添加 仿Yii 的简易版 数据验证 支持不同场景，自定义回调

    给个意见或建议吧 扩展一个Model基类 <?php class BaseModel extends Model{ use ValidationRules; public function ru ...

  10. 黑马程序员——OC语言 其他语法

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)ARC的判断准则:只要没有强指针指向对象,就会释放对象 1.ARC特 ...