基于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 相关文章推荐
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
jQuery filter函数使用方法
May 19 Javascript
JS截取字符串实例详解
Nov 24 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
js实现可爱的气泡特效
Sep 05 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获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
$()JS小技巧
2007/07/21 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
前台文员我鉴定
2014/01/12 职场文书
推荐信范文大全
2015/03/27 职场文书
人事聘任通知
2015/04/21 职场文书
肖申克救赎观后感
2015/06/02 职场文书
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python