javascript dragable的Move对象
作者:bea
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JavaScript Data Access Test&
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Data Access Test</title>
</script>
<script type="text/javascript">
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;
}
}
}
}
onload = function(){
Move.make("div2");
//Move.make("div2");
}
</script>
<style type="text/css">
#div{
background: #ccc;
height: 30px;
}
#div2{
background:#f00;
height: 30px;
width: 100px;
}
#d{
background:#ccc;
}
</style>
</head>
<body>
<div id="div2">move me pls</div>
</body>
</html>
[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 array类 数组操作方法
- 上传图片时JS自动显示图片
- Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
- javascript 当前日期加(天、周、月、年)
- javascript 局部页面打印实现代码
- jQuery 解析xml文件
- ext 代码生成器
- JavaScript 变量作用域及闭包
- JavaScript 的方法重载效果
- JQuery 小练习(实例代码)
- js正确获取元素样式详解
- JavaScript 乱码问题
- jquery ui dialog里调用datepicker的问题
- jquery select(列表)的操作(取值/赋值)
- asp(javascript)全角半角转换代码 dbc2sbc
- javascript Array.remove() 数组删除
- 实现连缀调用的map方法(prototype)
- Extjs ajax同步请求时post方式参数发送方式
- 同一个表单 根据要求递交到不同页面的实现方法小结