简明现代魔法 -> HTML超文本标记语言 -> 可移动的div层设计

可移动的div层设计

2010-12-19

可拖动的层在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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们