jQuery實做拖拉層移動效果

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

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

1. <div id="column1" class="column">
2. <!-- Widgets code here -->
3. </div>
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]
7. </h2>
8. <div class="dragbox-content" >
9. <!-- Panel Content Here -->
10. </div>
11. </div>
12. </div>
14. <div id="column2" class="column">
15. <div class="dragbox" id="item2" >
16. <h2>Handle 2
17. [url=#] [/url]
18. [url=#] [/url]
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. });
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. );
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='';
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);
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. }
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. }
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. }
47. .maxmin
48. {
49. background-position:-26px 1px;
50. }
52. .delete
53. {
54. background-position:-269px center;
55. padding-top:1px;
56. }