将图标拖放到回收站并删除基于jQuery的函数

在本文中，我们使用jQuery来实现拖放桌面小图标的功能，它就像操作系统的回收站一样。我们只需要将应用程序图标拖到垃圾桶中删除这个图标，然后与您共享。

运行效果图：

介绍核心文件

在这里，您需要介绍jQuery、jQuery UI和jQuery CSS

创建HTML



核心的CSS样式

没有CSS3基础的朋友，请了解下CSS3或以下的CSS会努力

/ * ----------------------------
CSS3的文件夹
----------------------------- * /
{。文件夹
这将使3D效果。减少此值
*使观点更加清楚：。

WebKit的视角：800px；
800px -moz视角；
观点：800px； / * * / 800px镜头距离

位置：绝对；
顶部：50%；
左：50%；
Z指数：0；

宽度：160px；
身高：120px；
保证金：- 00 - 60px 100px；
}

文件夹{ {
宽度：150px；
身高：115px；

背景颜色：# 93bad8；

三维的变化保留了位置
WebKit的变换风格：preserve-3d；
风格：preserve-3d -moz变换；
风格：preserve-3d变换；

*平滑过渡动画
WebKit的过渡：0.5s；
过渡：0.5s -moz；
过渡：0.5s；

禁止用户选择元素
WebKit的用户选择：无；
-moz用户选择：无；
用户选择：无；

位置：绝对；
顶部：0；
左：50%；
margin-left: - 75px；
}
文件夹。前{

圆形，X轴三维转换30度。
5px 5px边界半径：00；
-moz变换：rotatex（- 30deg）；
WebKit的变换：rotatex（- 30deg）；
变换：rotatex（- 30deg）；

在x轴上定义位置和y轴。
-moz变换起源：50% 100%；
WebKit的变换起源：50% 100%；
转换原点：50% 100%；

定义渐变效应
背景图像：-moz线性梯度（顶部，# 93bad8 0%，# 6c9dc0 85%，# 628faf 100%）；
背景图像：WebKit的线性梯度（顶部，# 93bad8 0%，# 6c9dc0 85%，# 628faf 100%）；
背景图像：线性梯度（顶部，# 93bad8 0%，# 6c9dc0 85%，# 628faf 100%）；

阴影的定义*
盒子的影子：0 2px 2px RGBA（0,0,0,0.1），0 1px RGBA（255255255,0.35）插图；

Z指数：10；

26px sans serif字体：黑体；
颜色：# 5a88a9；
文本对齐：中心；
文字阴影：1px 1px 1px RGBA（255, 255, 255，0.1）；
行高：115px；
}

文件夹。
定义渐变效应
背景图像：WebKit的线性梯度（顶部，# 93bad8 0%，# 89afcc 10%，# 5985a5 60%）；
背景图像：-moz线性梯度（顶部，# 93bad8 0%，# 89afcc 10%，# 5985a5 60%）；
背景图像：线性梯度（顶部，# 93bad8 0%，# 89afcc 10%，# 5985a5 60%）；

定义
0 5px边界半径：00；
阴影的定义*
盒子的影子：0 1px 1px RGBA（0,0,0,0.15）；
}

除了前面的内容
文件夹：返回：{
内容；
宽度：60px；
身高：10px；
4px 4px边界半径：00；
背景颜色：# 93bad8；
位置：绝对；
上图：- 10px；
左：0px；
盒子的影子：0 1px 1px RGBA（0,0,0,0.15）；
}

在后面添加内容。
文件夹：后面：{
内容；
宽度：100%；
身高：4px；
边界半径：5px；
位置：绝对；
底部：5px；
左：0px；
盒子的影子：0 4px 8px # 333；
}

文件夹。打开。前{
50 三维转换
-moz变换：rotatex（- 50deg）；
WebKit的变换：rotatex（- 50deg）；
变换：rotatex（- 50deg）；
}
/ * ----------------------------
拖动图标
----------------------------- * /

#主要img {
位置：绝对；
光标移动；
}

写js

$（函数（）{（））

var文件夹= $（#主。文件夹， / /文件夹）
前= folder.find（'前'），前部/文件夹
img = $（#主要IMG），所有图片/集装箱主
droppedcount = 0； / /计数器

（IMG。拖动）； / /使所有的图片都可以拖动

folder.droppable（{ / /可删除的事件，即事件触发时，拖到一个文件夹
删除：函数（事件，用户界面）

拖动图片/莫比尔
Ui.draggable.remove（）；

到计数器加1
front.text（+ + droppedcount）；

}，

激活：函数（）拖动该文件夹打开

Folder.addClass（打开的）；
}，

停用：函数（）停止拖动文件夹释放
Folder.removeClass（打开的）；
}
}）；
}）；
源代码下载：jQuery实现，可拖放删除小图标循环站功能。
以上是将图标拖放到回收站并删除该教程的功能，谢谢您耐心阅读病人，希望对您有所帮助。