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


Posted in Javascript onNovember 25, 2015

本文利用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();
       
      // 给计数器加1
      front.text(++droppedCount);
       
    },
     
    activate : function(){ //拖拽时让文件夹打开
       
      folder.addClass('open');
    },
     
    deactivate : function(){ //停止拖拽时让文件夹关闭
      folder.removeClass('open');
    }
  });
});

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

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

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
js实现交通灯效果
Jan 13 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
使用Javascript写的2048小游戏
Nov 25 #Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 #Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python opencv实现图像配准与比较
2021/02/09 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
廉洁家庭事迹材料
2014/05/15 职场文书
现场活动策划方案
2014/08/22 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
校长师德表现自我评价
2015/03/05 职场文书
被告代理词范文
2015/05/25 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang