jQuery實做拖拉層移動效果

jQuery 和jQuery ui搭配，可以實現象igoogle那樣的拖拉拽的效果，下面以實例
講解下。

首先要用到的類庫是jquery和jquery ui了。
1 Java代碼

1. <div id="column1" class="column">   
2. <!-- Widgets code here -->   
3. </div>   
4.   
5. <div id="column2"  class="column">   
6. <!-- Widgets code here -->   
7. </div>  

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

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

  假設分為兩列，要從列1拖拉到列2
2 再細化代碼如下
  Java代碼

1. <div id="column1" class="column">   
2.     <div class="dragbox" id="item1" >   
3.         <h2>Handle 1  
4.           [url=#] [/url]   
5.           [url=#] [/url]   
6.   
7.         </h2>   
8.         <div class="dragbox-content" >   
9.             <!-- Panel Content Here -->   
10.         </div>   
11.     </div>   
12. </div>   
13.   
14. <div id="column2"  class="column">   
15.     <div class="dragbox" id="item2" >   
16.         <h2>Handle 2  
17.           [url=#] [/url]   
18.           [url=#] [/url]   
19.   
20.         </h2>   
21.         <div class="dragbox-content" >   
22.             <!-- Panel Content Here -->   
23.         </div>   
24.     </div>   
25. </div>  

<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 出場,代碼如下:
Java代碼

1. $(   
2. function(){   
3.     $('a.maxmin').click(   
4.     function(){   
5.         $(this).parent().siblings('.dragbox-content').toggle();   
6.     });   
7.   
8.     $('a.delete').click(   
9.     function(){   
10.         var sel = confirm('do you want to delete the widget?');   
11.         if(sel)   
12.         {   
13.             //del code here   
14.         }   
15.     }   
16.     );   
17.   
18.     $('.column').sortable({   
19.     connectWith: '.column',   
20.     handle: 'h2',   
21.     cursor: 'move',   
22.     placeholder: 'placeholder',   
23.     forcePlaceholderSize: true,   
24.     opacity: 0.4,   
25.     stop: function(event, ui)   
26.         {   
27.             $(ui.item).find('h2').click();   
28.             var sortorder='';   
29.   
30.             $('.column').each(function(){   
31.                 var itemorder=$(this).sortable('toArray');   
32.                 var columnId=$(this).attr('id');   
33.                 sortorder+=columnId+'='+itemorder.toString()+'&';   
34.             });   
35.             sortorder = sortorder.substring(0, sortorder.length - 1)   
36.             alert('SortOrder: '+sortorder);   
37.   
38.         }   
39.     }).disableSelection();   
40. });  

$(
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
  Java代碼

1. .column{   
2.     width:49%;   
3.     margin-right:.5%;   
4.     min-height:300px;   
5.     background:#fff;   
6.     float:left;   
7. }   
8. .column .dragbox{   
9.     margin:5px 2px  20px;   
10.     background:#fff;   
11.     position:"relative";   
12.     border:1px solid #946553;   
13.     -moz-border-radius:5px;   
14.     -webkit-border-radius:5px;   
15. }   
16. .column .dragbox h2{   
17.     margin:0;   
18.     font-size:12px;   
19.     background:#946553;   
20.     color:#fff;   
21.     border-bottom:1px solid #946553;   
22.     font-family:Verdana;   
23.     cursor:move;   
24.     padding:5px;   
25. }   
26.   
27. .dragbox-content{   
28.     background:#fff;   
29.     min-height:100px; margin:5px;   
30.     font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;   
31. }   
32. .column  .placeholder{   
33.     background: #EED5B7;   
34.     border:1px dashed #946553;   
35. }   
36.   
37. .opIcons   
38. {   
39. background-image: url('iconSpirite.gif')!important;   
40. background-repeat: no-repeat;   
41. float:right;   
42. height:13px;   
43. width:13px;   
44. margin:0px 2px;   
45. }   
46.   
47. .maxmin   
48. {   
49.     background-position:-26px 1px;   
50. }   
51.   
52. .delete   
53. {   
54.     background-position:-269px center;   
55.     padding-top:1px;   
56. }