拖拽支持ie6

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

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

Javascript 事件捕获(setCapture,captureEvents) ：模块拖放居然可以跨出浏览器。到底是什么方法让 mousemove 和 mouseup 事件可以到浏览器外也可以触发，（ie6ie7不支持 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;
        
        //ie6ie7
        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>

相关阅读:
糊涂的教授
 有趣的英语角
 聚会
 新年礼物
 三核苷酸
 数字编码
 【同行说技术】iOS程序员从小白到大神必读资料汇总
 【同行说技术】Android图片处理技术资料汇总（一）
【同行说技术】swift最全学习资料汇集（一）
【同行说技术】iOS程序员从小白到大神必读资料汇总（一）
原文地址：https://www.cnblogs.com/aimyfly/p/3154563.html

拖拽 支持ie6

拖拽支持ie6