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의 방법으로 1열, 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#