1. 程式人生 > >jqueryeasyUI(3 元素拖動)

jqueryeasyUI(3 元素拖動)

建立3個DIV,

<div id="div0" class="demo">
div0
</div>
<div id="div1" class="demo">
div1
</div>
<div id="div2" class="demo">
div2
</div>

 

配置不同的拖拽引數

<title> 元素拖拽</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>

<style>
 .demo{
 height: 60px;
  width: 60px;
  position: absolute;
  	border:2px solid #d3d3d3;
 }
 
 #div0{
 
  left:20px;
 top:20px;
  background-color: red
 }
 
 .proxy{
			border:1px dotted #333;
			width:60px;
			height:60px;
			text-align:center;
			background:blue;
		}
  #div1{
left:100px;
top:20px;
  background-color: green
 }
 
  #div2{
 left:180px;
top:20px;
  background-color: yellow
 }
 

</style>

	<script>
		$(function(){
			//允許拖拽
			$('#div0').draggable();
			//建立一個克隆來進行拖拽
			$('#div2').draggable({
				proxy:'clone'
			});
			//通過建立自定義代理(proxy)讓其可以拖動。
			$('#div1').draggable({
				proxy:function(source){
					var p = $('<div class="proxy">proxy</div>');
					p.appendTo('body');
					return p;
				}
			});
		});
	</script>