隨著時代的變化，越來越感受到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 = 頁.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 = 頁.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，後續有新的心得體會也會與大家分享，希望與大家共同學習，進步。