基于jQuery实现拖拽图标到回收站并删除功能
136 浏览量
2020-10-23
06:52:23
上传
评论
收藏 54KB PDF 举报
基于基于jQuery实现拖拽图标到回收站并删除功能实现拖拽图标到回收站并删除功能
主要介绍了基于jQuery实现拖拽图标到回收站并删除功能，实现非常简单，我们直接可以利用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;
评论0
最新资源