javascript dragable的Move对象

253 阅读 0 评论 167 点赞

我是靠谱客的博主安静服饰，最近开发中收集的这篇文章主要介绍javascript dragable的Move对象，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

[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; 
} 
} 
} 
} 