jQuery ui中的拖拽 -

aijnecJay

浏览: 58417 次
性别:
来自: 上海

最近访客更多访客>>

zhengjianqiu

345588612

zheyiw

guo13012409387

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery ui中的拖拽

博客分类：

技术

jquery ui html 拖拽

jQuery ui 的拖拽

在jQuery的拖拽出现之前,在页面上写一个能实现拖拽效果的JS很麻烦,需要监听鼠标的动作,位置等等,代码也比较冗长,而用jQuery ui就会起到事半功倍的效果.

这里介绍一个利用sortable排序列表来实现的拖拽功能.
直接上代码

<html>

<head>



 <style type="text/css">
   .placehelperclass{
	   border:2px dashed #ccccff;
	}  
  </style>


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(function() {

  $("#portal_view .column").each(function(index,value){
			$('.column-'+(index+1)).each(function(idx,vae){			 
				value.appendChild(vae);
			});			
		});



		$("#portal_view .column").sortable({
			connectWith:"#portal_view .column",
			revert:true,
			opacity:0.7,
			scrollSensitivity: 100,
			scrollSpeed:100,
			tolerance:'pointer',
			forcePlaceholderSize:true,
			delay:1,
			handle:'.portlet-header',
			placeholder:'placehelperclass',
			cancel:'.portlet-disabled'
		});


	$("#portal_view .column").disableSelection();


});
</script>
</head>


<body>





<div id="div_out" class="div_out">
	<div id="portal_view" style="width:100%;">
			<table width="100%">			
				<tr>
					<td width="60%" valign="top">
				
						<div id="draggable1" class="column">							
						&nbsp;
						</div>
							
					</td>					
					<td width="40%" valign="top">			
					<div id="draggable2" class="column">
					&nbsp;
					</div>
					</td>
				</tr>
				
					<tr>
					<td width="60%" valign="top">
				
						<div id="draggable1" class="column">							
						&nbsp;
						</div>
							
					</td>					
					<td width="40%" valign="top">			
					<div id="draggable2" class="column">
					&nbsp;
					</div>
					</td>
				</tr>
				
			</table>
		</div>

              <div class="portlet column-2">
								<div class="portlet-header">
									<table width="100%">
										<tr>
											<td class="portlet-title">Black iPhone 4</td>
											<td class="portlet-tools" style="display:none;" align="right">X</td>
										</tr>
									</table>
								</div>
								<div class="portlet-content" id="portlet-content-1">
									<img src="./iphone4s.jpg" />
								</div>
								<input type="hidden" class="portletDescriptionId" value="1"/>
								<input type="hidden" class="portletId" value="1"/>
							</div>
							
							
							 <div class="portlet column-1">
								<div class="portlet-header">
									<table width="100%">
										<tr>
											<td class="portlet-title">White iPhone 4S</td>
											<td class="portlet-tools" style="display:none;" align="right">X</td>
										</tr>
									</table>
								</div>
								<div class="portlet-content" id="portlet-content-2">
									<img src="./iphone4s_white.jpg" />
								</div>
								<input type="hidden" class="portletDescriptionId" value="2"/>
								<input type="hidden" class="portletId" value="2"/>
							</div>
							
							<div class="portlet column-3">
								<div class="portlet-header">
									<table width="100%">
										<tr>
											<td class="portlet-title">Baidu</td>
											<td class="portlet-tools" style="display:none;" align="right">X</td>
										</tr>
									</table>
								</div>
								<div class="portlet-content" id="portlet-content-3">
									<img src="./baidu_sylogo1.gif" />
								</div>
								<input type="hidden" class="portletDescriptionId" value="3"/>
								<input type="hidden" class="portletId" value="3"/>
							</div>
							
					

</body>


</html>

这个例子是从一个真实的PORTAL项目里提炼简化而来的,可以看出,JS的代码量非常少,简明扼要.,首先通过value.appendChild(vae);
这个方法把对应的DIV读取到可排序列表的框架里去(#portal_view .column),这样做的目的是为了配合页面拖拽排版的持久化,当从数据库或者其他持久化层中把页面几个可排序块的内容读取出来后,按照存入的顺序依次分配到对应的排序列表表格中去,而和拖动有关的内容全部都在.sortable这个API里配置,包括透明度,回退等等各个参数,具体可以参考官方的API文档.

大家可以试一下.