拖拽 支持ie6

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

 

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);

 

拖拽 支持ie6

<!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)