网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
javascript dragable的Move对象
(编辑:jimmy 日期: 2024/10/13 浏览:
2
)
JavaScript Data Access Test
move me pls
[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 轻松支持函数重载 (Part 2 - 实现)
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。
最新资源
群星《新说唱2024 第5期 (中)》[320K/MP3][275.
群星《新说唱2024 第5期 (下)》[320K/MP3][24.4
群星《新说唱2024 第5期 (下)》[FLAC/分轨][128
谭咏麟.-.环球DSD视听之王WAV
陈慧娴.-.环球DSD视听之王[WAV]
张学友.2003-《环球DSD视听之王》[WAV+CUE]
群星.1989-永远的朋友【宝丽金】【WAV+CUE】
张小英.1982-银河·我在梦乡(2015新世纪复黑版)【
李明依.1996-爱的决定【友善的狗】【WAV+CUE】
关淑怡.2002-《环球DSD视听之王》[WAV]
首页
音乐
电影
资源