這篇文章主要介紹了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; } } 其中event獲取鼠標事件，pageX，pageY獲取鼠標的坐標，layerX，layerY獲取鼠標距離div邊框的距離。 還有一段代碼： 代碼如下: if (dv.setCapture) { dv.setCapture(); } else if (window.captureEvents) { window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } 這個就是捕捉div的MouseMove和MouseUp事件，不懂得tx可以到網上查查。 3. document的MouseMove和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; } 其中的tx,ty就是最重要的代碼了，是設置div坐標的 有的人可能會問為什麼要-x,-y? x,y其實就是獲取鼠標距離div邊框的距離，如果不減掉的話 鼠標箭頭的坐標和div的x,y坐標一樣了，這樣拖動之後，鼠標的位置會偏到左上角，效果就是，拖動之後會彈動一下。 代碼如下: if (dv.releaseCapture) { dv.releaseCapture(); } else if (window.releaseEvents) { window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP); } d.onmousemove = null; d.onmouseup = null; 上面這段代碼就是在鼠標松開之後取消document的onmousemove，onmouseup事件。 最近都在學習js，後續有新的心得體會也會與大家分享，希望與大家共同學習，進步。