本文利用jquery实现一个拖拽删除桌面小图标的功能，使用起来就像操作系统的回收站一样，我们只需要拖动应用图标至垃圾箱即可删除这个图标，分享给大家，具体实现方法如下
运行效果图：
引入核心文件
这里需要引入jquery，jquery ui，与jquery ui css

构建html

核心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'); } });});
源码下载：jquery实现可拖拽删除小图标回收站功能
以上就是实现拖拽图标到回收站并删除功能的教程，感谢亲们的耐心阅读，希望对大家的学习有所帮助。