利用jQuery实现**站删除效果

比眉伴天荒 2022-08-05 12:05 67阅读 0赞

jQuery是一款非常强大的Javascript脚本库，我们开发者喜欢jQuery的原因除了它代码简洁外，更多的是因为jQuery插件非常丰富。今天我们用一个示例来解说jQuery是如何实现拖拽的。   
  
利用jQuery实现拖拽非常简单，我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素。今天我们就利用jQuery的这一特性来实现一个拖拽删除桌面小图标的功能，就像操作系统的\*\*站一样，我们只需要拖动[应用][Link 1]图标至垃圾箱即可删除这个图标，具体可以看下面的DEMO[演示][Link 2]。

![6.png][]

2014-8-5 10:36:59 上传

[**下载附件** (50.29 KB)][_50.29 KB]

**大家也可以看[DEMO演示][DEMO]**  
  
下面来简单介绍一下实现这款jQuery拖拽删除小图标的方法流程，主要包括HTML代码、[CSS3][]代码以及jQuery代码。  
  
**HTML代码：**  
  
HTML代码主要定义了一个\*\*站文件夹的容器，以及各个小图标的图片。

1.  <div id=”main”>  
    
2.    
    
3.  <div class=”folder”>  
    
4.  <div class=”front”></div>  
    
5.  <div class=”back”></div>  
    
6.  </div>  
    
7.    
    
8.  <img src=”assets/48px/box.png” style=”top:340px;left:100px;” alt=”box” />  
    
9.  <img src=”assets/48px/calculator.png” style=”top:340px;left:170px;” alt=”calculator” />  
    
10. <img src=”assets/48px/clipboard.png” style=”top:340px;left:240px;” alt=”clipboard” />  
    
11. <img src=”assets/48px/console.png” style=”top:340px;left:310px;” alt=”console” />  
    
12. <img src=”assets/48px/basketball.png” style=”top:340px;left:380px;” alt=”basketball” />  
    
13. <img src=”assets/48px/facebook.png” style=”top:400px;left:100px;” alt=”facebook” />  
    
14. <img src=”assets/48px/gift.png” style=”top:400px;left:170px;” alt=”gift” />  
    
15. <img src=”assets/48px/id\_card.png” style=”top:400px;left:240px;” alt=”id card” />  
    
16. <img src=”assets/48px/imac.png” style=”top:400px;left:310px;” alt=”imac” />  
    
17. <img src=”assets/48px/system\_monitoring.png” style=”top:400px;left:380px;” alt=”system monitoring” />  
    
18.   
    
19. </div>

*复制代码*

代码结构比较简单，下面是简单的CSS代码。  
  
**CSS代码：**

1.  .folder \{  
    
2.      /\* This will enable the 3D effect. Decrease this value  
    
3.       \* to make the perspective more pronounced: \*/  
    
4.    
    
5.      -webkit-perspective: 800px;  
    
6.      -moz-perspective: 800px;  
    
7.      perspective: 800px;  
    
8.    
    
9.      position: absolute;  
    
10.     top: 50%;  
    
11.     left: 50%;  
    
12.     z-index: 0;  
    
13.   
    
14.     width: 160px;  
    
15.     height: 120px;  
    
16.     margin: -100px 0 0 -60px;  
    
17. \}  
    
18.   
    
19. .folder div\{  
    
20.     width:150px;  
    
21.     height:115px;  
    
22.   
    
23.     background-color:\#93bad8;  
    
24.   
    
25.     /\* Enabling 3d space for the transforms \*/  
    
26.     -webkit-transform-style: preserve-3d;  
    
27.     -moz-transform-style: preserve-3d;  
    
28.     transform-style: preserve-3d;  
    
29.   
    
30.     /\* Enabling a smooth animated transition \*/  
    
31.     -webkit-transition:0.5s;  
    
32.     -moz-transition:0.5s;  
    
33.     transition:0.5s;  
    
34.   
    
35.     /\* Disable text seleltion on the folder \*/  
    
36.     -webkit-user-select: none;  
    
37.       -moz-user-select: none;  
    
38.       user-select: none;  
    
39.   
    
40.     position:absolute;  
    
41.     top:0;  
    
42.     left:50%;  
    
43.     margin-left:-75px;  
    
44. \}  
    
45.   
    
46. .folder .front\{  
    
47.     border-radius:5px 5px 0 0;  
    
48.   
    
49.     -moz-transform:rotateX(-30deg);  
    
50.     -webkit-transform:rotateX(-30deg);  
    
51.     transform:rotateX(-30deg);  
    
52.   
    
53.     -moz-transform-origin:50% 100%;  
    
54.     -webkit-transform-origin:50% 100%;  
    
55.     transform-origin:50% 100%;  
    
56.   
    
57.     background-image: -moz-linear-gradient(top, \#93bad8 0%, \#6c9dc0 85%, \#628faf 100%);  
    
58.     background-image: -webkit-linear-gradient(top, \#93bad8 0%, \#6c9dc0 85%, \#628faf 100%);  
    
59.     background-image: linear-gradient(top, \#93bad8 0%, \#6c9dc0 85%, \#628faf 100%);  
    
60.   
    
61.     box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;  
    
62.   
    
63.     z-index:10;  
    
64.   
    
65.     font: bold 26px sans-serif;  
    
66.     color: \#5A88A9;  
    
67.     text-align: center;  
    
68.     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);  
    
69.     line-height: 115px;  
    
70. \}  
    
71.   
    
72. .folder .back\{  
    
73.     background-image: -webkit-linear-gradient(top, \#93bad8 0%, \#89afcc 10%, \#5985a5 60%);  
    
74.     background-image: -moz-linear-gradient(top, \#93bad8 0%, \#89afcc 10%, \#5985a5 60%);  
    
75.     background-image: linear-gradient(top, \#93bad8 0%, \#89afcc 10%, \#5985a5 60%);  
    
76.   
    
77.     border-radius:0 5px 0 0;  
    
78.     box-shadow:0 -1px 1px rgba(0,0,0,0.15);  
    
79. \}  
    
80.   
    
81. .folder .back:before\{  
    
82.     content:'';  
    
83.     width:60px;  
    
84.     height:10px;  
    
85.     border-radius:4px 4px 0 0;  
    
86.     background-color:\#93bad8;  
    
87.     position:absolute;  
    
88.     top:-10px;  
    
89.     left:0px;  
    
90.     box-shadow:0 -1px 1px rgba(0,0,0,0.15);  
    
91. \}  
    
92.   
    
93. .folder .back:after\{  
    
94.     content:'';  
    
95.     width:100%;  
    
96.     height:4px;  
    
97.     border-radius:5px;  
    
98.     position:absolute;  
    
99.     bottom:5px;  
    
100.     left:0px;  
    
101.     box-shadow:0 4px 8px \#333;  
    
102. \}  
    
103.   
    
104. .folder.open .front\{  
    
105.     -moz-transform:rotateX(-50deg);  
    
106.     -webkit-transform:rotateX(-50deg);  
    
107.     transform:rotateX(-50deg);  
    
108. \}  
    
109.   
    
110. /\*----------------------------  
    
111.     Draggable Icons  
    
112. \-----------------------------\*/  
    
113.   
    
114. \#main img\{  
    
115.     position:absolute;  
    
116.     cursor:move;  
    
117. \}

*复制代码*

按照上面的CSS定义，删除小图标的\*\*站文件夹的外观是3D的，这个要看你浏览器的3D支持情况。  
  
最后是最重要的jQuery代码，真正实现了鼠标拖拽图标，并将其放入\*\*站，这里引用了jQuery UI的脚本库，熟悉jQuery的朋友应该对jQuery UI不会陌生，这里不再赘述。   
  
**jQuery代码：**

1.  $(function() \{  
    
2.    
    
3.      var folder = $("\#main .folder"),  
    
4.          front = folder.find('.front'),  
    
5.          img = $("\#main img"),  
    
6.          droppedCount = 0;  
    
7.    
    
8.      img.draggable();  
    
9.    
    
10.     folder.droppable(\{  
    
11.         drop : function(event, ui) \{  
    
12.   
    
13.             // Remove the dragged icon  
    
14.             ui.draggable.remove();  
    
15.   
    
16.             // update the counters  
    
17.             front.text(++droppedCount);  
    
18.   
    
19.         \},  
    
20.   
    
21.         activate : function()\{  
    
22.             // When the user starts draggin an icon  
    
23.             folder.addClass('open');  
    
24.         \},  
    
25.   
    
26.         deactivate : function()\{  
    
27.             // Close the folder  
    
28.             folder.removeClass('open');  
    
29.         \}  
    
30.     \});  
    
31. \});

*复制代码*

通过上面的代码，我们就实现了一个基于jQuery的小图标删除\*\*站效果，上面只是核心代码，详细代码大家可以下载源代码来研究。[源代码下载>>][Link 3]  
  
via: [http://www.cnblogs.com/html5tricks/p/3890789.html][http_www.cnblogs.com_html5tricks_p_3890789.html]

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=20
[Link 2]: http://www.html5cn.org/portal.php?mod=list&catid=10
[6.png]: http://bbs.html5cn.org/data/attachment/forum/201408/05/103659g53dbe51e389ad58.png
[_50.29 KB]: http://bbs.html5cn.org/forum.php?mod=attachment&aid=MjQwOTV8YzM4YWJmMGN8MTQzMDgzMzY4MnwwfDgzNzYx&nothumb=yes
[DEMO]: http://www.html5tricks.com/demo/jquery-drag-delete-icon/index.html
[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[Link 3]: http://files.cnblogs.com/html5tricks/jquery-drag-delete-icon.rar
[http_www.cnblogs.com_html5tricks_p_3890789.html]: http://www.cnblogs.com/html5tricks/p/3890789.html