基于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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
Smarty模板语法详解
2019/07/20 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
JS随机密码生成算法
2019/09/23 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python与mysql数据库交互的实现
2020/01/06 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
生物学学生自我评价
2014/01/17 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
委托协议书范本
2014/04/22 职场文书
关于保护环境的建议书
2014/05/13 职场文书
生日庆典策划方案
2014/06/02 职场文书
教师辞职信范文
2015/02/28 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
初中语文教师研修日志
2015/11/13 职场文书
mysql部分操作
2021/04/05 MySQL