jquery实做拖拉层移动效果

jquery 和jquery ui搭配，可以实现象igoogle那样的拖拉拽的效果，下面以实例
讲解下。

首先要用到的类库是jquery和jquery ui了。
1

<div id="column1" class="column">
<!-- Widgets code here -->
</div>

<div id="column2"  class="column">
<!-- Widgets code here -->
</div>

假设分为两列，要从列1拖拉到列2
2 再细化代码如下

<div id="column1" class="column">
	<div class="dragbox" id="item1" >
		<h2>Handle 1
		  [url=#] [/url]
		  [url=#] [/url]

		</h2>
		<div class="dragbox-content" >
			<!-- Panel Content Here -->
		</div>
	</div>
</div>

<div id="column2"  class="column">
	<div class="dragbox" id="item2" >
		<h2>Handle 2
		  [url=#] [/url]
		  [url=#] [/url]

		</h2>
		<div class="dragbox-content" >
			<!-- Panel Content Here -->
		</div>
	</div>
</div>

可以看到,每个DIV层中,都有两个按钮,分别是最大化和删除该层菜单的按钮.

3
现在轮到jquery 出场,代码如下:

$(
function(){
	$('a.maxmin').click(
	function(){
		$(this).parent().siblings('.dragbox-content').toggle();
	});

	$('a.delete').click(
	function(){
		var sel = confirm('do you want to delete the widget?');
		if(sel)
		{
			//del code here
		}
	}
	);

	$('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
	stop: function(event, ui)
		{
			$(ui.item).find('h2').click();
			var sortorder='';

			$('.column').each(function(){
				var itemorder=$(this).sortable('toArray');
				var columnId=$(this).attr('id');
				sortorder+=columnId+'='+itemorder.toString()+'&';
			});
			sortorder = sortorder.substring(0, sortorder.length - 1)
			alert('SortOrder: '+sortorder);

		}
	}).disableSelection();
});

下面解析下上面的代码:
$('a.maxmin').click 和$('a.delete').click(
分别是用来处理最小化,最大化的情景,而a.delete则是处理删除的情况(这里没进行处理)
之后拖拉是通过jquery的sortable的可拖拉层来进行处理,具体的请参考jquery
手册,这里增加了一个处理,是在拖拉移动时,用alert的方法,显示出在第一列,第2列中,
当前的各列中div层的名称.

4 配套的CSS

.column{
	width:49%;
	margin-right:.5%;
	min-height:300px;
	background:#fff;
	float:left;
}
.column .dragbox{
	margin:5px 2px  20px;
	background:#fff;
	position:"relative";
	border:1px solid #946553;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	background:#946553;
	color:#fff;
	border-bottom:1px solid #946553;
	font-family:Verdana;
	cursor:move;
	padding:5px;
}

.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #EED5B7;
	border:1px dashed #946553;
}

.opIcons
{
background-image: url('iconSpirite.gif')!important;
background-repeat: no-repeat;
float:right;
height:13px;
width:13px;
margin:0px 2px;
}

.maxmin
{
	background-position:-26px 1px;
}

.delete
{
	background-position:-269px center;
	padding-top:1px;
}

运行效果参考:http://shivasoft.in/blog/wp-content/uploads/demos/DragAndDrop/index.html#