在cnblogs上看到这篇文章http://www.cnblogs.com/idche/archive/2010/05/18/1738449.html;其中一段实现拖动div的代码相当精彩:

var $=function(id){return document.getElementById(id);};
 
var getMouseP=function (e){//获取鼠标坐标 请传递evnet参数
 
				e = e || window.event;
				var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop  - document.body.clientTop };
				   return m;
 
			};
 
move=function(o,t){
				o=$(o);
				t=$(t);
				o.onmousedown=function(ev){
					var mxy=getMouseP(ev);//获取当前鼠标坐标
					var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)};
					o.style.cursor="move";
					document.onmousemove=function(ev){
							var mxy=getMouseP(ev);
							t.style.left=mxy.x-by.x+"px";
							t.style.top=mxy.y-by.y+"px";
						};
					document.onmouseup=function(){
							window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
							this.onmousemove=null;
						}
				}
	}
move("jelle_test_div","jelle_test_div");

查看演示

Related posts:

  1. 关于previousSibling与nextSibling firefox中会出现一个奇怪的现象,就是p1的previousSibling与nextSibling均返回undefined,使用nodeType测试 p1.previousSibling会返回3,也就是文本属性——firefox把p1与h4之间的回车换行也当作了一个元素!这种形式:(“\n ”) 因此在使用previousSibling与nextSibling时需要去做一些处理,一是可以将其节点之间的换行回车删除;二是使用p1.previousSibling.previousSibling这种间接方式来获取。...
  2. js中的冒泡事件与事件监听 js中“冒泡事件”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的冒泡应该说是交换更加准确;js里面的“冒泡事件”才是真正意义上的“冒泡”,它从DOM最低层逐层遍历树,然后附加相应事件。...
  3. js中的链式调用 jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷。其实现机制就是链式调用。链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里。...
  4. 详解scrollTop、scrollHeight、offsetWidth、offsetTop scrollTop:这个属性在当外层元素包含内层元素时起作用,可用来获取和设置内层元素相对于外层元素向上卷起的距离,默认为0;当设置内层元素为正数时,则内层元素会相对于外层元素向上偏离相应的距离。...

以上关联文章由 Yet Another Related Posts Plugin 提供支持。