|
|
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
其中比較重要的代碼：
復制代碼 代碼如下:
var Move = {
$: function(id){
return (typeof id == "object") ? id : document.getElementById(id);
},
pageX: function(elem){ //獲取目標elem的X坐標
return elem.offsetParent ? //如果能繼續得到上一個元素，增加當前的偏移量并繼續向上遞歸
elem.offsetLeft + this.pageX(elem.offsetParent) : elem.offsetLeft;
},
pageY: function(elem){ //獲取目標elem的Y坐標
return elem.offsetParent ? elem.offsetTop + this.pageX(elem.offsetParent) : elem.offsetTop;
},
make: function(id){
var elem = this.$(id);
var oldXY = null;
var newXY = null;
var x = 0; //記錄初始化是目標elem的x坐標
var y = 0; //記錄初始化是目標elem的y坐標
var t = this;
elem.onmouseover = function(e){
this.style.cursor = "default";
}
elem.onmousedown = function(e){
e = e || window.event;
this.style.position = "absolute";
this.style.cursor = "move";
x = t.pageX(this);
y = t.pageY(this);
var that = this;
oldXY = {
x: e.clientX,
y: e.clientY
}; //獲取鼠標在按下的時候的坐標
document.onmousemove = function(e){
e = e || window.event;
newXY = {
x: e.clientX,
y: e.clientY
}; //獲取鼠標在移動過程中的坐標
that.style.left = (newXY.x - oldXY.x + x) + "px";
that.style.top = (newXY.y - oldXY.y + y) + "px";
that.style.zIndex = "100";
}
}
elem.onmouseup = function(e){
this.style.cursor = "default";
this.style.zIndex = "0";
document.onmousemove = function(e){ //在放開鼠標的時候覆蓋掉mousemove事件函數
return;
}
}
}
}
JavaScript技術：javascript dragable的Move對象，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
