首页 / 操作系统 / Linux / 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. }