基于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 相关文章推荐
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php实现的生成排列算法示例
2019/07/25 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python使用turtle绘制分形树
2018/06/22 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Python try except else使用详解
2021/01/12 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
新闻专业应届生求职信
2013/10/31 职场文书
爱护草坪标语
2014/06/24 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
整改报告怎么写
2014/11/06 职场文书
写给导师的自荐信
2015/03/06 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript