当前位置：Gxlcms > JavaScript > javascript dragable的Move对象

javascript dragable的Move对象

时间：2021-07-01 10:21:17 帮助过：24人阅读

<!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> 
        move me pls 
</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 dragable的Move对象

人气教程排行