如何用JavaScript做一个可拖动的div层

可拖动的层在Web设计中用处很多，比如在某些需要自定义风格布局的应用中，控件就需要拖动操作，下面介绍一个，希望可以满足你的需求，顺便学习一下可拖动的层是如何实现的。

下面是效果演示：

这个DIV可以移动，你可以测试下。

 

JavaScript code

<script type="text/javascript">

// <![CDATA[

var $j=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=$j(o);

	t=$j(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");

// ]]>

</script>