本文利用jquery实现一个拖拽删除桌面小图标的功能，使用起来就像操作系统的回收站一样，我们只需要拖动应用图标至垃圾箱即可删除这个图标，分享给大家，具体实现方法如下
运行效果图：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
引入核心文件
这里需要引入jquery，jquery ui，与jquery ui css
<link rel="stylesheet" href="assets/css/jquery-ui.css"><script src="js/jquery/1.8.3/jquery.min.js"></script><script src="js/jqueryui/1.9.2/jquery-ui.min.js"></script>
构建html
<div id="main"> <div class="folder"> <div class="front"></div> <div class="back"></div> </div> @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ </div>
核心CSS样式
没有CSS3基础的朋友，请先了解下CSS3，要不下面的CSS会吃力
/*----------------------------
CSS3文件夹
-----------------------------*/
.folder {
/* This will enable the 3D effect. Decrease this value
* to make the perspective more pronounced: */
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px; /*镜头距离800PX*/
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 160px;
height: 120px;
margin: -100px 0 0 -60px;
}
.folder div{
width:150px;
height:115px;
background-color:#93bad8;
/* 3D变化保留元素的位置 */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
/*平滑的动画过渡 */
-webkit-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
/*禁止用户选中元素*/
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position:absolute;
top:0;
left:50%;
margin-left:-75px;
}
.folder .front{
/*圆角，X轴3D转换30度 */
border-radius:5px 5px 0 0;
-moz-transform:rotateX(-30deg);
-webkit-transform:rotateX(-30deg);
transform:rotateX(-30deg);
/*定义在X轴与Y轴的位置 */
-moz-transform-origin:50% 100%;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%;
/*定义渐变效果 */
background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
/*定义阴影 */
box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
z-index:10;
font: bold 26px sans-serif;
color: #5A88A9;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
line-height: 115px;
}
.folder .back{
/*定义渐变效果 */
background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
/*定义圆角*/
border-radius:0 5px 0 0;
/*定义阴影 */
box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
/*在.back前加上内容 */
.folder .back:before{
content:'';
width:60px;
height:10px;
border-radius:4px 4px 0 0;
background-color:#93bad8;
position:absolute;
top:-10px;
left:0px;
box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
/*在.back后加上内容 */
.folder .back:after{
content:'';
width:100%;
height:4px;
border-radius:5px;
position:absolute;
bottom:5px;
left:0px;
box-shadow:0 4px 8px #333;
}
.folder.open .front{
/*3D转换50度 */
-moz-transform:rotateX(-50deg);
-webkit-transform:rotateX(-50deg);
transform:rotateX(-50deg);
}
/*----------------------------
Draggable Icons
-----------------------------*/
#main img{
position:absolute;
cursor:move;
}
写入JS
$(function() {
var folder = $("#main .folder"), //文件夹
front = folder.find('.front'), //文件夹前面部分
img = $("#main img"), //容器main中的所有图片
droppedCount = 0; //记数器
img.draggable(); //使所有图片可以拖拽
folder.droppable({ //droppable事件,即拖拽到文件夹时触发的事件
drop : function(event, ui) {//释放时触发
// 移动拖拽的图片
ui.draggable.remove();
// 给计数器加1
front.text(++droppedCount);
},
activate : function(){ //拖拽时让文件夹打开
folder.addClass('open');
},
deactivate : function(){ //停止拖拽时让文件夹关闭
folder.removeClass('open');
}
});
});
以上就是实现拖拽图标到回收站并删除功能的教程，感谢亲们的耐心阅读，希望对大家的学习有所帮助。
