usoft
/
uas6.0


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
  	<link rel="stylesheet" href="<%=basePath %>resource/css/main.css" type="text/css"></link>
  	<style type="text/css">
  	ul li{
		
	}
	#l1{
		float: left;
		border: 1px;
	}
	.drag{
		height: 100px;width:160px; border:1px solid #ffecb0; font-size:12px; background-color:#cfcfcf; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	}
  	</style>
  	<script type="text/javascript" src="<%=basePath %>resource/jquery/jquery-1.4.min.js"></script>
  	<script type="text/javascript" src="<%=basePath %>resource/jquery/showtip.js"></script>
  	<script type="text/javascript" src="<%=basePath %>resource/other/drag.js"></script>
	<script type="text/javascript">
		var basePath = '<%=basePath %>';
		function load(){
			$.each($(".drag"),function(i){//根据div宽高，设置其样式
				var height = $(this).css('height').replace(/px/g,'');
				var width = $(this).css('width').replace(/px/g,'');
				var padding = 10;//设置div间隔为10px
				var col = 4; //设置每行显示div个数
				var k = Math.floor(i/col);//整除运算
				var top = padding*(k+1) + height*k;
				top = top + 30;//第一行降低30px
				var left = padding*(i%col+1) + width*(i%col);
				$(this).css('top', top);
				$(this).css('left', left);
				$(this).find('font').text('{↑top:' + top + ', ←left:' + left + '}');
				Drag.init(this);
			});
		}
		function save(){
			$.showtip('不要乱拖哦...', 2000, 80, 160);
		}
		var basePath = '<%=basePath %>';
	</script>
  </head>
  <body onload="load();" style="background-image: url('<%=basePath%>resource/images/background_1.jpg')">
  	<ul>
  		<li>
  			<input id="save" type="button" value="保存&raquo;" onclick="save();"/>
  			<input id="reset" type="button" value="重置&raquo;" onclick="load();"/>
  			<br/> 
  		</li>
  		<li id="l1">
   			 <div id="win">
   				<div id="draggable1" class="drag">模块1,随便拖哦<br/><font></font></div>
   				<div id="draggable2" class="drag">模块2,随便拖哦<br/><font></font></div>
   				<div id="draggable3" class="drag">模块3,随便拖哦<br/><font></font></div>
   				<div id="draggable4" class="drag">模块4,随便拖哦<br/><font></font></div>
   				<div id="draggable5" class="drag">模块5,随便拖哦<br/><font></font></div>
   				<div id="draggable6" class="drag">模块6,随便拖哦<br/><font></font></div>
   				<div id="draggable7" class="drag">模块7,随便拖哦<br/><font></font></div>
   				<div id="draggable8" class="drag">模块8,随便拖哦<br/><font></font></div>
   				<div id="draggable9" class="drag">模块9,随便拖哦<br/><font></font></div>
   				<div id="draggable10" class="drag">模块10,随便拖哦<br/><font></font></div>
   				<div id="draggable11" class="drag">模块11,随便拖哦<br/><font></font></div>
   				<div id="draggable12" class="drag">模块12,随便拖哦<br/><font></font></div>
  			</div>
  		</li>
  	</ul>
  </body>
</html>