jQuery ui中的拖拽

最新推荐文章于 2021-09-14 19:05:37 发布

JasonDante

最新推荐文章于 2021-09-14 19:05:37 发布

阅读量213

点赞数 1

分类专栏：技术文章标签： jquery ui html 拖拽 ViewUI

技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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">							
						 
						</div>

					</td>					
					<td width="40%" valign="top">			
					<div id="draggable2" class="column">
					 
					</div>
					</td>
				</tr>

					<tr>
					<td width="60%" valign="top">

						<div id="draggable1" class="column">							
						 
						</div>

					</td>					
					<td width="40%" valign="top">			
					<div id="draggable2" class="column">
					 
					</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文档.

大家可以试一下.