jQuery实现拖拽图标到回收站并删除功能的实例讲解

  • 更新时间:2020-05-21 14:20:48
  • 编辑:郁成双
给大家整理了相关的编程文章,网友詹元甲根据主题投稿了本篇教程内容,涉及到jquery、拖拽、回收站、基于jQuery实现拖拽图标到回收站并删除功能相关内容,已被501网友关注,下面的电子资料对本篇知识点有更加详尽的解释。
  • jQuery网页开发实例精解 / 57 MB 推荐度:
  • jQuery UI开发指南 / 6.02 MB 推荐度:
  • jQuery 前端开发实战 / 48.51MB 推荐度:
  • 《jQuery应用开发实践指南》官网源代码 / 1.1 MB 推荐度:
  • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践 / 167.1 MB 推荐度:
  • 基于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"  alt="box" /> 
      <img src="assets/48px/calculator.png"  alt="calculator" /> 
      <img src="assets/48px/clipboard.png"  alt="clipboard" /> 
      <img src="assets/48px/console.png"  alt="console" /> 
      <img src="assets/48px/basketball.png"  alt="basketball" /> 
      <img src="assets/48px/facebook.png"  alt="facebook" /> 
      <img src="assets/48px/gift.png"  alt="gift" /> 
      <img src="assets/48px/id_card.png"  alt="id card" /> 
      <img src="assets/48px/imac.png"  alt="imac" /> 
      <img src="assets/48px/system_monitoring.png"  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实现可拖拽删除小图标回收站功能

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

    相关教程

    用户留言