<!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> <mce: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.οnmοuseοver=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.οnmοusemοve=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.οnmοuseup=function(e){ this.style.cursor="default"; this.style.zIndex="0"; document.οnmοusemοve=function(e){ //在放开鼠标的时候覆盖掉mousemove事件函数 return; } } } } onload = function(){ Move.make("div2"); //Move.make("div2"); } // --></mce:script> <mce:style type="text/css"><!-- #div{ background: #ccc; height: 30px; } #div2{ background:#f00; height: 30px; width: 100px; } #d{ background:#ccc; } --></mce:style><style type="text/css" mce_bogus="1"> #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>
javascript dragable的Move对象
最新推荐文章于 2022-11-26 11:46:20 发布