`

拖动布局实例

JavaScriptCSSGoogleXHTML 
阅读更多
这是一个拖动布局的例子，不是拖放到页面的任意位置，而是页面上有很多格子，每个格子间可互换位置。将该文件保存为html文件，即可查看效果。本实例没有使用什么高深的技术，紧紧使用了css+div JavaScript 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<head>
<title>JavaScript Google IG Drag Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
	<style type="text/css">
		.col_div{ 
			float:left; width:700px; height:auto; color:#fff; margin-left:10px; text-align:center; padding:0px; text-align:center
		}
		.drag_div{ 
			margin:1px auto; border:1px solid #1b243d; padding:0px; float:left; border:solid 1px black;
		}
		 .modbox{ 
		 	border:1px solid #1b243d; padding:0px; float:left; width:80px; height:80px; margin:1px auto;
		}
		.drag_header{ 
			font-weight:bold; height:80px; width:80px; padding:0px; margin:0px; border:solid 0px red; text-align:center; line-height:80px;
		}
		.no_drag{ height:0px; overflow:hidden; padding:0; border:0;}
	</style>
</head>

<body>

<div id="col_1" class="col_div">
	<!-- 用 JavaScript 绘制 128 个 div -->
	<script type="text/javascript">
		for(var i = 0 ; i < 128 ; i++){
			document.write('<div id="drag_' + i + '" class="drag_div" style="background:#F50;"><div id="drag_' + i + '_h" class="drag_header"> #' + i + '</div></div>');
		}
	</script>
</div>

<script type="text/javascript">
//该方法得到当前窗口被卷去的部分的高度，是一个大于等于0的值
function getScroll()  {   
   var t, l, w, h; 
   //当前窗口有被卷去的部分，即有滚动条的时候，执行这句        
   if (document.documentElement && document.documentElement.scrollTop) {    
   	    t = document.documentElement.scrollTop;       
   	    l = document.documentElement.scrollLeft;  
   	    w = document.documentElement.scrollWidth;
   	    h = document.documentElement.scrollHeight;  
   } 
   //当前窗口无被卷去的部分，即无滚动条的时候
   else if (document.body) { 
   	    t = document.body.scrollTop;       
   	    l = document.body.scrollLeft;     
   	    w = document.body.scrollWidth;     
   	    h = document.body.scrollHeight;    
   }   
   return t;
} 
dragDrop={

	absPos:function(node){
    var t=getScroll();
    var y=-t;
		var x=a=0;
		do	{
			x+=node.offsetLeft;
			y+=node.offsetTop;
			a+=node.offsetTop;
		}
		while(node=node.offsetParent);
		return {
			'x':x,
			'y':y,
			'a':a
		};		
	}

	,isIntersect:function(x,y,node){
		var m=this.absPos(node),
			xx=m.x,
			yy=m.y;
		return !(x<xx||
			y<yy||
			x>(xx+node.offsetWidth)||
			y>(yy+node.offsetHeight)
		);
	}

	,drag:function(hander,ini){
		var def={dir:'xy',minIndex:1,end:String,isMove:true};
		ini=ini||{};
		for(var key in ini )def[key]=ini[key];
		ini=def;
		
		var dragObj=moveObj=ini.win||hander;
		var $me=moveObj;
		if(ini.isMove)moveObj.style.position="absolute";
		hander.onmousedown=function (e){
			this.style.cursor=ini.cursour||"move";
			if(ini.box!=undefined){
				var rect=document.createElement('DIV')
					,pos=dragDrop.absPos($me);
				rect.style.cssText='top:'+pos.y+';left:'+pos.x
					+';border:dashed 1px #666;'
					+'height:'+$me.offsetHeight+'px;'			
					+'width:'+$me.offsetWidth+'px;background:none;position:absolute;'+ini.box;
				var pos=dragDrop.absPos(dragObj);
				rect.style.top=pos.a+'px';
				rect.style.left=pos.x+'px';
				moveObj=document.body.appendChild(rect);
				moveObj.innerHTML=dragObj.innerHTML;
			};
			e=window.event||e;
			this.prevOverObj_x=e.clientX;
			this.prevOverObj_y=e.clientY;
			this.x=e.clientX-moveObj.offsetLeft;
			this.y=e.clientY-moveObj.offsetTop;
			document.title=[dragObj.offsetLeft,this.x,this.y]
			moveObj.style.zIndex=(dragDrop.zIndex?
				dragDrop.zIndex++:
				dragDrop.zIndex=1)+ini.minIndex;
			if(document.all){
				hander.onlosecapture=dragStop;
				e.cancelBubble=true;
				hander.setCapture();
			}else{window.onblur=dragStop;e.stopPropagation()};

			dragDrop.onBegin.call(dragObj,moveObj);/* my Event */

			document.onmousemove=function(e){
				e=e||window.event;
				var $x=undefined,$D=document,$W=window;
				var x=e.clientX-hander.x,y=e.clientY-hander.y;

				if($x!=ini.left)x=Math.max(x,ini.left);
				if($x!=ini.top)y=Math.max(y,ini.top);
				if($x!=ini.right)x=Math.min(x,ini.right-dragObj.offsetWidth);
				if($x!=ini.bottom)y=Math.min(y,ini.bottom-dragObj.offsetHeight);
				if(ini.dir.indexOf('x')!=-1)moveObj.style.left=x+"px";
				if(ini.dir.indexOf('y')!=-1)moveObj.style.top=y+"px";

				if($D.all){hander.setCapture();e.cancelBubble=true;
				}else{window.onblur=dragStop;e.stopPropagation()}
				$W.getSelection && $W.getSelection().removeAllRanges();	
				dragDrop.onDrag.call(dragObj,moveObj,e.clientX,e.clientY);/* my Event */
			};

			function dragStop(e){
				var $D=document;
				e=window.event||e;
				$D.onmousemove=$D.onmouseup=null;
				if($D.all){hander.onlosecapture=null;hander.releaseCapture();
				}else{window.onblur=null}
				if(ini.box!=undefined){
					if(ini.isMove){
						$me.style.left=parseInt(moveObj.style.left)+'px';
						$me.style.top=parseInt(moveObj.style.top)+'px';
					}
					$D.body.removeChild(rect);	
				};
				dragDrop.onDrop.call(dragObj);/* my Event */
			};

			document.onmouseup=dragStop;
		};
		return this;
	}

	,onIntersect:function(){}
	,onDrag:function(){}
	,onBegin:function(){}
	,onDrop:function(){}
	,U:{prevOverObj:null}

};

dragDrop.onDrag=function (mover,x,y){
	for (var i=0;i<divs.length;i++ ) {
		if(dragDrop.isIntersect(x,y,divs[i])){
			dragDrop.onIntersect.call(this,divs[i]);
			break;
		}
	}
};

dragDrop.onBegin=function (){
	this.style.visibility='hidden';
}

dragDrop.onDrop=function (){
	var __this=this,i=0;
	this.style.visibility='visible';
	dragDrop.U1.style.background='#F50';
	if(this==dragDrop.U1)return;
	var pos=dragDrop.U1.nextSibling;
	if(pos==this){
		this.parentNode.insertBefore(this,dragDrop.U1);
	}else{
		this.parentNode.insertBefore(dragDrop.U1,this);
		this.parentNode.insertBefore(this,pos);	
	}
	(function (){
		dragDrop.U1.style.background=__this.style.background=['#F50','#FFFF33'][i%2];
		if(i++<4)setTimeout(arguments.callee,100)
	})();
}

dragDrop.onIntersect=function(overObj){
	if(dragDrop.U1)
		dragDrop.U1.style.background='#F50';
	if(overObj!==this){
		overObj.style.background='#33CC00';
	};
	dragDrop.U1=overObj;
};

window.onload=function (){
	 shell=document.getElementById("col_1");
	 alldiv=shell.getElementsByTagName('DIV');
	 divs=[];
	for (var i=0;i<alldiv.length;i++ ) {
		if(alldiv[i].className=='drag_div')divs.push(alldiv[i])
	}
	g=dragDrop.absPos(shell);
	g2=g.x+shell.offsetWidth-45;
	g3=g.y+shell.offsetHeight;
	for (var i=0;i<divs.length;i++ ) {
		dragDrop.drag(
			divs[i],{
				box:'background:#eee;filter:alpha(opacity=80);opacity:0.8',
				cursour:'pointer',
				isMove:0,
				left:g.x,
				top:g.y,
				right:g2,
				bottom:g3
		});
	}
}
</script>
</body>
</html>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bootstarp拖拽布局例子

    在"bootstarp拖拽布局例子"中，我们主要关注的是如何利用Bootstrap的工具和特性来实现用户友好的拖拽布局，这在设计网页时非常实用，尤其是对于希望创建类似于QQ空间小窝布局模式下自由布局的体验。 Bootstrap的...

    php+mysql+js拖拽div实例

    **PHP + MySQL + JS 拖拽Div实例详解** 在Web开发中，用户交互性是提升用户体验的关键因素之一。拖拽功能（Drag and Drop）可以让用户通过鼠标直接操作页面元素，增强了网页的互动性。本实例将介绍如何使用PHP、...

    jQuery支持自定义拖拽布局插件Portal.zip

    这个“jQuery支持自定义拖拽布局插件Portal.zip”文件显然是一个包含jQuery插件的压缩包，该插件允许用户在网页上创建可自定义拖放的布局。在本文中，我们将深入探讨jQuery、拖拽布局以及如何利用这种插件来增强用户...

    flex 拖拽的例子

    5. **实例代码**： 通常，我们会在一个组件类中设置拖放行为，例如一个List组件。在`itemMouseDown`事件中启动拖动，而在目标组件中监听`dragDrop`事件来处理放下动作。 ```actionscript // List组件上的拖动...

    Web 前端拖拽实现实例分析

    本文将深入探讨如何在Web前端实现拖放功能，通过实例分析不同实现方式的优缺点，帮助开发者选择最适合项目需求的解决方案。 首先，让我们了解拖放的基本原理。拖放功能涉及两个主要事件：`dragstart`、`drag`、`...

    jquery拖拽布局

    其中，拖拽布局（Draggable Layout）是一种常见的增强用户体验的技术，它允许用户通过鼠标直接拖动元素来改变页面布局。本文将深入探讨如何利用jQuery实现这样的功能。 **一、jQuery简介** jQuery是一款轻量级的...

    iframe网页上下左右布局模板

    iframe网页上下左右布局模板，可以修改里面的css代码来更改各个模块的大小，位置。很基本使用的网页布局模板

    Jqury拖动实例（25种实例）

    在这个"jQuery拖动实例（25种实例）"中，我们将探讨如何利用jQuery实现类似Google应用中的拖放效果。拖放功能在现代网页设计中非常常见，比如在文件管理、日历应用或者界面元素布局中都有其身影。 首先，jQuery的...

    android拖动布局Demo

    本Demo，"android拖动布局Demo"，提供了实现这一功能的实例代码，旨在帮助开发者理解如何在自己的应用中实现类似的功能。 首先，我们来讨论拖动布局的核心概念。在Android中，拖放操作涉及到`ViewDragHelper`类，这...

    拖动按钮实例

    本实例以"拖动按钮"为主题，旨在提供一个简单的实现方案，让用户能够自由地移动按钮，类似于手机锁屏界面的滑动解锁功能。 首先，我们要理解拖动操作的基本原理。在编程中，拖动操作通常涉及鼠标或触摸屏的按下、...

    jquery 制作可拖拽的div实例

    制作可拖拽的div是实现用户交互的一种常见方法，常用于创建自定义控件、布局管理或模拟物理对象的移动。 首先，确保引入jQuery库。在HTML文件（如`drage.html`或`test.html`）的`&lt;head&gt;`部分，添加以下代码来引用...

    EXTjs 简单布局实例

    //实例菜单树形 menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', bodyStyle:'background:transparent url(images/default/panel/group-lr.gif) repeat-x 0 bottom;', id:'extExample-tree', ...

    上下左右拖动并且加载不同布局的RecyclerView

    本文将详细讲解如何实现一个可以上下左右拖动，并且能加载不同布局的RecyclerView。 首先，理解RecyclerView的基本结构。RecyclerView由Adapter、LayoutManager和ViewHolder三部分组成。Adapter负责填充数据，...

    div 拖拽实例 下载

    总的来说，这个"div拖拽实例"涉及到的知识点包括jQuery库的使用、`draggable()`方法、CSS样式设计、可能的布局系统集成以及浏览器兼容性问题。通过理解这些概念和技术，开发者可以创建出更具互动性的网站元素，提升...

    仿iGoogle双击编辑-网页拖动完整实例

    iGoogle允许用户自定义主页，添加各种小工具并进行布局调整，这个实例则提供了类似的功能实现，包括双击编辑和网页元素的拖动功能。 在Web开发中，实现这样的功能需要掌握以下关键技术点： 1. **HTML**：作为网页...

    jquery图片拖拽实例.zip

    【jQuery图片拖拽实例】是一个基于JavaScript库jQuery实现的交互式功能，允许用户通过鼠标拖动操作来移动页面上的图片。这个实例展示了如何利用jQuery的事件处理和DOM操作能力，为用户提供直观且易于使用的界面体验...

    python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例

    本文将深入探讨PyQt5中的QSplitter布局控件，这是一个动态的布局管理器，允许用户通过拖动边界来调整子控件的大小。 QSplitter控件在PyQt5中扮演着重要的角色，它能够根据用户的交互动态调整子控件的尺寸。当用户...

    winform仿vs工具箱，标签设计，拖拽布局

    4. **拖拽布局**：拖拽布局是一种用户友好的设计方式，用户可以通过鼠标直接拖动控件来改变其位置和大小。在WinForm中，可以实现此功能通过处理控件的`MouseDown`、`MouseMove`和`MouseUp`事件，配合计算鼠标的相对...

    Android ImageView 拖拽实例

    在“Android ImageView 拖拽实例”中，我们主要关注的是如何赋予ImageView手势操作的能力，让用户能够通过触摸屏幕来移动ImageView。这个实例的实现涉及到以下几个关键知识点： 1. **监听触摸事件**：首先，我们...

    鼠标拖动层 实例

    JavaScript的事件模型使得我们可以对用户的交互做出实时响应，而CSS则提供了丰富的视觉效果和布局控制。通过结合这两者，我们可以创造出高度互动的网页元素，提高用户的参与度和满意度。 在实际应用中，可能还需要...

Magicbox
Global site tag (gtag.js) - Google Analytics