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

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

运行效果图：

引入核心文件这里需要引入jquery，jquery ui，与jquery ui css

链接rel='样式表href=' assets/CSS/jquery-ui。CSS '/脚本src=' http : js/jquery/1。8 .3/jquery。量滴js /脚本脚本src=' http : js/jqueryui/1。9 .2/jquery-ui。量滴js /脚本构建超文本标记语言

div id=' main ' div class=' folder ' div class=' front '/div div class=' back '/div/div img src=' http 3360 assets/48px/box。png ' style=' top :340 px'left :100 px ' alt=' box '/img src=' http : assets/48px/calculator。png ' style=' top :340 px'left :170 px ' alt=' calculator '/img src=' http : assets/48px/剪贴板。png ' style=' top :340 px'left:240px'alt='剪贴板/img src=' http : assets/48px/console。png ' style=' top :340 px'left :310 px ' alt=' console '/img src=' http : assets/48px/basket。png ' style=' top :340 px'left:380px'alt='篮球/img src=' http : assets/48px/脸书。png ' style=' top :400 px'left:100px'alt='脸书'/img src=' http : assets/48px/gift。png ' style=' top :400 pxleft :170 px ' alt=' gift '/img src=' http : assets/48px/id _ card。png ' style=' top :400 pxleft :240 px ' alt=' id card '/img src=' http : assets/48px/IMAC。png ' style=' top :400 pxleft :310 px ' alt=' IMAC '/img src=' http : assets/48px/system _ monitoring。png ' style=' top :400 pxleft:380px'alt='系统监控/div核心半铸钢钢性铸铁(铸造半钢)样式没有CSS3基础的朋友，请先了解下CSS3，要不下面的半铸钢钢性铸铁(铸造半钢)会吃力

/* - CSS3文件夹- */.文件夹{ /*这将启用三维（three dimension的缩写）效果。减小此值*以使透视更清晰d : */-web套件-透视图： 800 px-moz-透视： 800像素；透视图800px/*镜头距离800PX*/位置：绝对；前：名50%；左侧： 50%;z-index : 0；宽度： 160像素；高度： 120像素；余量：-100px 0-60px；} .文件夹div { width :150 pxhirth :115 px背景色： # 93坏8；/* 3D变化保留元素的位置*/-web套件-转换-style : preserve-3d；-moz-transform-style : preserve-3d；变换样式： preserve-3d；/*平滑的动画过渡*/-web套件-transit :0.5s；-moz-transit :0.5s；transit :0.5s/*禁止用户选中元素*/-web套件-用户-选择：无；蚊子用户-选择：无；用户选择：无；位置：绝对；top:0左侧：50%;左边距：-75px；} .文件夹。前{ /*圆角，X轴三维(三维的缩写)转换30度*/边框-半径：5 px 5px 0 0-moz-transformer : rotatex(-30)；-web套件-transform : rotatex(-30)；transform : rotatex(-30)；/*定义在X轴与Y轴的位置*/-moz-transform-origin :50% 100%；-web套件-转换-origin :50% 100%；转换-原始：50% 100%;/*定义渐变效果*/background-image :-moz-linear-gradient(top，#93bad8 0%，#6c9dc0 85%，# 628 faf 100%)；背景-图像：-网络套件-线性-渐变(顶部，#93bad8 0%，#6c9dc0 85%，# 628 faf 100%)；背景-图像：线性-渐变（顶部，#93bad8 0%，#6c9dc0 85%，# 628 faf 100%)；/*定义阴影*/box-shadow :0-2px 2px rgba(0，0，0，0.1)，0 1px rgba(255，255，255，0.35)插图；z索引：10;font: bold 26px无衬线字体；颜色： # 5a 88 a9文本对齐：中心；文字-阴影： 1px 1px 1px rgba(255，255，255，0.1)；线高： 115像素；} .文件夹。后退{ /*定义渐变效果*/background-image :-web kit-linear-gradient(top，#93bad8 0%，#89afcc 10%，# 5985 a5 60%)；背景-图像：-moz-线性-渐变(顶部、#93bad8 0%、#89afcc 10%、# 5985 a5 60%)；背景-图像：线性-渐变（顶部、#93bad8 0%、#89afcc 10%、# 5985 a5 60%)；/*定义圆角*/border-radius :0 5px 0 0；/*定义阴影*/box-shadow :0-1px 1px rgba(0，0，0.15)；} /*在。背部前加上内容*/.{内容： }之前的文件夹。背部：宽度：60 pxheight :10 pxborder-radius :4 px 4px 0 0；背景色： # 93坏8；位置：绝对；top :-10px；left :0 pxbox-shadow :0-1px 1px rgba(0，0，0.15)；} /*在。背部后加上内容*/.{内容： }之后的文件夹。后移：宽度：100%;高度：4 pxborder-半径：5 px位置：绝对；bottom :5 pxleft :0 pxbox-shadow :0 4px 8px # 333；} .folder.open .前{ /*3D转换50度*/-moz-transformer : rotatex(-50)；-web套件-transform : rotatex(-50)；transform : rotatex(-50)；} /* -可拖动图标-*/#主img { position : absolute ECU rsor : move }写入射流研究…

$(function(){ var folder=$(' # main .文件夹'),//文件夹front=folder.find(' .前'),//文件夹前面部分img=$('#main img ')，//容器主要的中的所有图片丢弃计数=0；//记数器img。可拖动()；//使所有图片可以拖拽文件夹。可删除({//可删除事件，即拖拽到文件夹时触发的事件放下：函数（事件，ui) {//释放时触发//移动拖拽的图片ui。可拖动。移除()；//给计数器加一个前面。文本(丢弃的计数)；},激活：函数(){ //拖拽时让文件夹打开文件夹。add CLaSS(' open ')；},停用：函数(){ //停止拖拽时让文件夹关闭文件夹。移除类(' open ')；} });});源码下载：jQuery实现可拖拽删除小图标回收站功能

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