基于jQuery实现拖拽图标到回收站并删除功能

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

引入核心文件
这里需要引入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><img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" /> <img src="assets/48px/calculator.png" style="top:340px;left:170px;" alt="calculator" /> <img src="assets/48px/clipboard.png" style="top:340px;left:240px;" alt="clipboard" /> <img src="assets/48px/console.png" style="top:340px;left:310px;" alt="console" /> <img src="assets/48px/basketball.png" style="top:340px;left:380px;" alt="basketball" /> <img src="assets/48px/facebook.png" style="top:400px;left:100px;" alt="facebook" /> <img src="assets/48px/gift.png" style="top:400px;left:170px;" alt="gift" /> <img src="assets/48px/id_card.png" style="top:400px;left:240px;" alt="id card" /> <img src="assets/48px/imac.png" style="top:400px;left:310px;" alt="imac" /> <img src="assets/48px/system_monitoring.png" style="top:400px;left:380px;" alt="system monitoring" /> </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（）; // 给计数器加1front.text（++droppedCount）; }, activate : function（）{ //拖拽时让文件夹打开 folder.addClass（"open"）;}, deactivate : function（）{ //停止拖拽时让文件夹关闭folder.removeClass（"open"）;}}）;}）;

源码下载：jQuery实现可拖拽删除小图标回收站功能

以上就是实现拖拽图标到回收站并删除功能的教程，感谢亲们的耐心阅读，希望对大家的学习有所帮助。