可随意拖拽方块至任一位置:
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>