可随意拖拽方块至任一位置：

1、setCapture方法：多用于容器对象，效果是对指定的对象设置鼠标捕获。使在容器内的子对象的鼠标事件均由容器对象触发，因此，只能在容器对象的鼠标事件函数中进行处理。
当参数为true时，对鼠标进行捕捉，相反，不捕捉。
与这个函数对应，releaseCapture方法释放鼠标捕获，并触发onlosecapture事件。

Javascript 事件捕获(setCapture,captureEvents) ：模块拖放居然可以跨出浏览器。到底是什么方法让 mousemove 和 mouseup 事件可以到浏览器外也可以触发，（ie6\ie7不支持 mousemove 和 mouseup）

object.setCapture() 当一个object的被 setCapture 后，他的方法将会被继承到整个文档进行捕获。当不需要把方法继承到整个文档捕获时，要用 object.releaseCapture()

Mozilla 也有类似的功能，方法稍微不同

window.captureEvents(Event.eventType)

window.releaseEvents(Event.eventType)

//针对IE对指定的对象设置鼠标捕获,alert(this._obj.setCapture) =》function setCapture(){ [native code]}

2、element.addEventListener(type,listener,useCapture); 等同于attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）如： document.addEventListener('moueup', this._stopDrag, true);

<!DOCTYPE HTML>

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

<head>

<style>

#div1 {background:red; width:100px; height:100px; position:absolute; cursor:move;}

#div2 {background:yellow; width:100px; height:100px; position:absolute; cursor:move;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

    window.onload = function () {

        var oDiv = document.getElementById("div1");

        var oDiv1 = document.getElementById('div2');

        var oDrag = new Drag(oDiv);

        var oDrag1 = new Drag(oDiv1);

        oDrag.onDragStart = function () {

            this.style.background = 'green';

        }

        oDrag.onDraging = function (x, y)

        {

            document.title = x + "," + y;

        }

        oDrag.onDragEnd = function () {

            this.style.background = "red";

        }

    }

    function Drag(obj) {

        var oBj = this;

        this._obj = obj;

        this._mouseStart = {};

        this._divStart = {};

        this._obj.onmousedown = function (ev) { //鼠标按下时执行...

            oBj._starDrag(ev);

        }

    }

    Drag.prototype._starDrag = function (ev) {

        var obj = this; //this为obj对象；

        var oEvent = ev || event;//ev的值为鼠标按下对象；

        this._mouseStart.x = oEvent.clientX; //鼠标按下位置的坐标值

        this._mouseStart.y = oEvent.clientY;

        this._divStart.x = this._obj.offsetLeft; //容器左上角的坐标

        this._divStart.y = this._obj.offsetTop;

        //ie6\ie7

        if (this._obj.setCapture) { //针对IE对指定的对象设置鼠标捕获,alert(this._obj.setCapture) =》function setCapture(){ [native code]}他的方法将会被继承到整个文档进行捕获

            this._obj.onmousemove = function (ev) {

                obj._doDrag(ev);

            }

            this._obj.onmouseup = function (ev) {

                obj._stopDrag(ev);

            }

            this._obj.setCapture();

        }

        //其它浏览器

        else {

            this._doDrags = function (ev) {

                obj._doDrag(ev);

            }

            this._stopDrags = function (ev) {

                obj._stopDrag(ev);

            }

            document.addEventListener('mousemove', this._doDrags, true); //element.addEventListener(type,listener,useCapture); 等同于attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）

            document.addEventListener('mouseup', this._stopDrags, true);

        }

        if (this.onDragStart) { //如果对象有onDragStart方法，即调用以下函数；

            this.onDragStart.call(this._obj);//函数调用方法，apply()和call(),我们可以使用它们来对this进行重置.

        }

    }

    Drag.prototype._doDrag = function (ev) {

        var oEvent = ev || event;

        var l = oEvent.clientX - this._mouseStart.x + this._divStart.x;//移动的距离

        var t = oEvent.clientY - this._mouseStart.y + this._divStart.y;

        this._obj.style.left = l + "px";

        this._obj.style.top = t + "px";

        if (this.onDraging) {

            this.onDraging.call(this._obj, l, t); //title 显示为当前坐标；

        }

    }

    Drag.prototype._stopDrag = function (ev) {

        if (this._obj.releaseCapture) {

            alert(this._obj.releaseCapture)

            this._obj.onmousemove = null;

            this._obj.onmouseup = null;

            this._obj.releaseCapture();

        }

        else {

            document.removeEventListener("mousemove", this._doDrags, true);

            document.removeEventListener("mouseup", this._stopDrags, true);

            this._doDrags = this._stopDrags = null;

        }

        if (this.onDragEnd) {

            this.onDragEnd.call(this._obj);

        }

    }

</script>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>

拖拽 支持ie6的更多相关文章

  1. WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持（WmNCHitTest）、自定义最大化位置和大小（WmGetMinMaxInfo）

    无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...

  2. 让您的WinForm控件快速支持拖拽文件

    实现原理:使用扩展方法. /// <summary> /// 控件扩展 /// </summary> public static class ControlExt { /// ...

  3. QTGraphics-View拖拽以及鼠标指针操作

    因为QGraphicsView继承自QWidget,它也提供了像QWidget那样的拖拽功能. 另外,为了方便,Graphics View框架也为场景以及每个item提供拖拽支持.当视图接收到拖拽事件 ...

  4. vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

    最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...

  5. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  6. 让Web页面中的编辑器支持黏贴或直接拖拽来添加图片

    基本原理是将剪贴板中的图片二进制数据转为Base64编码 代码: <html> <head> </head> <body> <script src ...

  7. MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  8. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  9. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

随机推荐

  1. python处理csv

    python处理csv 学习了:https://blog.csdn.net/qq_33363973/article/details/78783481  竟然pip install csv 无果: 学习 ...

  2. Maven中的SNAPSHOT版本和正式版本理解

    Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...

  3. 在weblogic上配置数据源

    转自:http://blog.csdn.net/weijie_search/article/details/2756585 旁白 这是在weblogic9.0+mysql5.1的环境下配置的数据源.其 ...

  4. 解决Android NDK 报jxxx编译找不到

    如题 解决: 引入NDK对应的arm或者x86库 如果你用的是GinyMotion模拟器,那就引入x86库 不多说了,见截图 1.选择Propertities->C/C++ General-&g ...

  5. Hadoop Exit Code 含义

    经常遇到的exception是: 1. PipeMapRed.waitOutputThreads(): subprocess failed with code N  ............ 2. T ...

  6. has been modified since the precompiled header地图错误

    添加高德地图的一个错误 has been modified since the precompiled header 解决方案: xcode---product----clean  清理重新编译一下就 ...

  7. Hibernate关系映射（一） 基于外键的单向一对一

    模拟用户和地址的映射关系,一个用户只有一个地址,用户知道地址,但是地址不知道用户.用户对地址的单向一对一映射. 一.建立实体类 Account.cs类 package com.lxit.entity; ...

  8. RxJava异步请求加载状态控制

    在我看来,RxJava最大的特点就是异步,无论你是解析复杂的数据或是IO操作,我们都可以利用它内置的线程池进行线程间的调度,简单的使用 subscribeOn(Schedulers.io()).doO ...

  9. webSQL 实现即时通讯

    websql存储方式一共有以下几个方法 openDatabase:这个方法使用现有的数据库或新建数据库来创建数据库对象. transaction:这个方法允许我们执行事务处理; executeSql: ...

  10. ORA-01400: 无法将 NULL 插入 ("CHARGE_WQRL"."SF_JMQTFY_T"."BH")

    [ERROR] JmCheckManageDaoImpl:901 - java.sql.SQLException: ORA-01400: 无法将 NULL 插入 ("CHARGE_WQRL& ...