JavaScript Data Access Test #div{ background: #ccc; height: 30px; } #div2{ background:#f00; height: 30px; width: 100px; } #d{ background:#ccc; } 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 继承实现例子

1. 创建基类 首先考虑Polygon类。哪些属性和方法是必需的？首先，一定要知道多边形的边数，所以应该加入整数属性sides。还有什么是多边形必需的？也许你想知道多边形的面积，那么加入计算面积的方法getArea()。图4>>>详细阅读

本文标题：javascript dragable的Move对象

地址：http://www.17bianji.com/kaifa2/JS/28305.html

 1/2    1