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

作者：

主要思路：

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

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

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

需要注意的两点：

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

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

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

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

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

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

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

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

比如：

document.getElementById("box").onmousedown = function(e)
{

    getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE

};

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

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

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

// document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉

        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  

// document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉

        document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

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

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

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta charset="utf-8">

 <title>Examples</title>

 <meta name="description" content="">

 <meta name="keywords" content="">

 <link href="" rel="stylesheet">

 <style type="text/css">

     #box{position: absolute;left:200px;top:200px;width: 200px;border:1px solid #333;height: 200px;background-color: #009cc9;text-align: center;}

 </style>

 </head>

 <body>

     <div class="wrap">

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

     </div>

     <script type="text/javascript">

     var o,   //捕获到的事件

           X,  //box水平宽度

           Y;  //box垂直高度

     function getObject(obj,e){    //获取捕获到的对象

         o = obj;

         // document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉

         document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);

         X = e.clientX - parseInt(o.style.left);   //获取宽度，

         Y = e.clientY - parseInt(o.style.top);   //获取高度，

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

     }

     document.getElementById("box").onmousedown = function(e){

         getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE

     };

     document.onmousemove = function(dis){    //鼠标移动事件处理

         if(!o){    //如果未获取到相应对象则返回

             return;

         }

         if(!dis){  //事件

             dis = event ;

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

         }

         o.style.left = dis.clientX - X +"px";     //设定box样式随鼠标移动而改变

         o.style.top = dis.clientY - Y + "px";

     };

     document.onmouseup = function(){    //鼠标松开事件处理

         if(!o){   //如果未获取到相应对象则返回

             return;

         }

         // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉

         document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

         o = '';   //还空对象

     };

     </script>

 </body>

 </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. nginx配置文件结构

    nginx配置文件结构   全局参数 配置系统全局参数如:worker_processes 工作子进程数量.error_log 错误日志路径.pid 进程IDEvent一般是配置nginx工作模式及连 ...

  2. 转！！XML,DTD,XSD,XSL的区别

    XML=可扩展标记语言(eXtensible Markup Language).可扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可用 方便的方式建立,虽然XML占 ...

  3. Android 广播机制概论

    Android 中的每一个应用程序都可以对自己感兴趣的广播进行注册,这样,该程序就只会接收到自己所关心的广播内容,这些广播可能是来自于系统的,也可能是来自于其他应用程序. 广播分为2种: 1.标准广播 ...

  4. ubuntu访问 windows文件

    在unbunt下,想打开windows的文件,出现这个报错 安装ntfs-3g: sudo apt-get install ntfs-3g 看下自己要挂载的分区叫啥名 sudo fdisk -l 我的 ...

  5. Python之路 day1 用户登录多次被锁定

    编写登陆接口: 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 #Author:ersa import getpass,os,sys #读取账户信息到内存中 try: accounts_fil ...

  6. node.js基础 1之基本概念常识

    node.js 好牛逼的样子哦 很火,很腻害~~~~ 有关node.js的版本常识: 一般用最新的稳定版本,非稳定版本用于测试,其中包括api的不稳定等. 起一个web服务器: ndoejs可以自定义 ...

  7. Web前端入门了解

    Web就是指万维网,网站,Web开发的方向包括Web前端,Web后台. Web前端又分为  静态Web 和 动态Web, 静态Web就是用HTML实现的. 动态Web的实现方式有多种. 动态Web的实 ...

  8. 忘记了MariaDB root密码的解决办法

    1.停掉mariaDB systemctl stop mariadb.service 2.KILL掉系统里的MySQL进程: ps -ef | grep mariadb #查询进程PIDkill 进程 ...

  9. java.util.logging.Logger 使用详解

    概述: 第1部分 创建Logger对象 第2部分 日志级别 第3部分 Handler 第4部分 Formatter 第5部分 自定义 第6部分 Logger的层次关系 参考 第1部分 创建Logger ...

  10. iOS开发UI篇—字典转模型

    iOS开发UI篇—字典转模型 一.能完成功能的“问题代码” 1.从plist中加载的数据 2.实现的代码 // // LFViewController.m // 03-应用管理 // // Creat ...