js實現可拖動DIV的方法

 這篇文章主要介紹了js實現可拖動DIV的方法，有需要的朋友可以參考一下

隨著時代的變化，越來越感覺到js的重要性，js不僅可以做web頁面(如Ext框架)，還可以做一些web的特效，這些特效不僅兼容PC，而且兼容手機端，畢竟是基於浏覽器的，和平台沒關系。現在微軟的windows8 系統的App都可以用js開發了，大家有時間可以去嘗試一下。        現在切入正題，說一下js 實現可拖動Div.實現這個功能我們先說一下思路：        1.捕捉鼠標div的mousedown事件        2.捕捉 document的   mousemove事件        3.取消事件   然後我們看一下代碼：   代碼如下: function Drag(id) {             var $ = function (flag) {                 return document.getElementById(flag);             }             $(id).onmousedown = function (e) {                 var d = document;                 var page = {                     event: function (evt) {                         var ev = evt || window.event;                         return ev;                     },                     pageX: function (evt) {                         var e = this.event(evt);                         return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);                     },                     pageY: function (evt) {                         var e = this.event(evt);                         return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);                       },                     layerX: function (evt) {                         var e = this.event(evt);                         return e.layerX || e.offsetX;                     },                     layerY: function (evt) {                         var e = this.event(evt);                         return e.layerY || e.offsetY;                     }                 }                              var x = page.layerX(e);                 var y = page.layerY(e);                         if (dv.setCapture) {                     dv.setCapture();                 }                 else if (window.captureEvents) {                     window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);                 }                 d.onmousemove = function (e) {                                         var tx = page.pageX(e) - x;                     var ty = page.pageY(e) - y;                     dv.style.left = tx + "px";                     dv.style.top = ty + "px";                 }                 d.onmouseup = function () {                     if (dv.releaseCapture) {                         dv.releaseCapture();                     }                     else if (window.releaseEvents) {                         window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);                     }                     d.onmousemove = null;                     d.onmouseup = null;                 }             }         }       代碼分析：   1.    獲取div對象     復制代碼 代碼如下: var $ = function (flag) {                 return document.getElementById(flag);             }        2.捕捉document的mousedown事件：   裡面有這麼一段代碼：   代碼如下:      var page = {                     event: function (evt) {                         var ev = evt || window.event;                         return ev;                     },                     pageX: function (evt) {                         var e = this.event(evt);                         return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);                     },                     pageY: function (evt) {                         var e = this.event(evt);                         return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);                       },                     layerX: function (evt) {                         var e = this.event(evt);                         return e.layerX || e.offsetX;                     },                     layerY: function (evt) {                         var e = this.event(evt);                         return e.layerY || e.offsetY;