js实现QQ邮箱邮件拖拽删除功能


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了js实现QQ邮箱邮件拖拽删除的具体代码,供大家参考,具体内容如下

步骤分析:

  • 根据数据结构生成HTML结构
  • 全选和单选功能的实现,以及当其为选中状态时它的父级的颜色变化的
  • 点击删除,删除结构同时删除数据
  • 给每一个li绑定mousedown,tip显示,并且定位在鼠标位置
  • 鼠标移动时,tip跟随,取消默认行为
  • 碰撞检测是否拖到“已删除”项
  • 鼠标松开、删除结构和数据

过程实现

HTML代码

<body>
<div class="wrap" id="box">
 <header class="head clear">
  <h1 class="left">
   <a class="logo" href="javascript:;" ></a>
   |
   <a href="javascript:;" >邮箱</a>
  </h1>
  <nav class="left">
   <a href="javascript:;" >邮箱首页</a>|<a href="javascript:;" >设置</a>
  </nav>
  <p class="hint1 left"></p>
  <p class="hint2 left"></p>
 </header>
 <div class="section clear">
  <div class="fuList left">
   <ul class="fuListBig">
    <li class="writeLetter">写信</li>
    <li class="collectLetter">收信</li>
    <li class="address">通讯录</li>
   </ul>
   <ul class="fuListSmall">
    <li class="inbox active">收件箱</li>
    <li class="StarMail">星标邮件</li>
    <li class="groupMail">群邮件</li>
    <li class="draftBox">草稿箱</li>
    <li class="beenSent">已发送</li>
    <li class="beenDel hover">已删除<a class="clearBtn" href="#" >清空</a></li>
    <li class="dustbin">垃圾箱<a class="clearBtn" href="#" >清空</a></li>
 </ul>
  </div>
  <div class="tBody left">
   <div class="title">
    收件箱(共96封,其中<a href="javascript:;" >未读邮件</a>9封)
   </div>
   <div class="emailFunctions">
    <a id="delet" href="javascript:;" >删除</a>
    <a href="javascript:;" >彻底删除</a>
    <a href="javascript:;" >转发</a>
    <a href="javascript:;" >举报</a>
    <a href="javascript:;" >全部标为已读</a>
    <a class="selectIcon" href="javascript:;" >标记为...</a>
    <a class="selectIcon" href="javascript:;" >移动到...</a>
   </div>
   <div class="emailList" id="emailCheckList">
    <header class="emailHead">
     <input type="checkbox" />
     <p><span></span><span></span></p>
    </header>
    <ul class="emailListUl">
     <!-- <li>
      <input type="checkbox">
      <div>
       <span>秒味课堂1</span>
       <span>2015-12-30</span>
      </div>
      <p>JS拖拽的进一步学习,移动与拉伸JS拖拽的进一步练习</p>
     </li> -->
    </ul>
   </div>
  </div>
 
 </div>
</div>
<div id="hint3" style="display:none;">选中2封邮件</div>

JS代码

这里需要引入碰撞函数检测的封装函数和数据,但在实际的应用一般是通过ajax从后台获取数据,所以此处就不在写模拟的数据,只记录一下我的写作步骤。

<script>
  window.onload = function(){//利用map方法和es6生成HTML结构
   var html = list.map(function(item){
    return `<li>
      <input type="checkbox" data-id = "${item.id}">
      <div>
       <span>${item.caption}</span>
       <span>${item.time}</span>
      </div>
      <p>${item.desc}</p>
</li>`
   }).join(' ');
   var oEmailListUl = document.querySelector('.emailListUl');
   oEmailListUl.innerHTML = html;
   
   var checkedAll = document.querySelector('.emailHead input');
   var checkSingle = oEmailListUl.querySelectorAll('input');
   var singleLen = checkSingle.length;
   var n = 0;
   var isAll = true;
   checkedAll.onclick = function(){//全选效果的实现
    for(var i=0; i<singleLen; i++){
     checkSingle[i].checked = this.checked;
    }
 
     for(var j=0; j<singleLen;j++){//单选效果的实现
      if(this.checked) {//如果取消选择,则将父级的颜色恢复为未选中状态的颜色
       checkSingle[j].parentNode.style.background = '#f2f6f9';
      }else{//如果选择,则将父级li的颜色变为选中的颜色
 
        checkSingle[j].parentNode.style.background = '';
      }
 
     }
 
   }
   for(var i=0; i<singleLen;i++){
    checkSingle[i].onclick = function(){
 
     if(!this.checked){//单击单选按钮时,如果是取消选择,则让全选的按钮也为未选中状态,否则的话如果是让其变为选中状态时,先要看看其他的单选按钮是不是也都是选中状态,如果是的话,就让全选按钮也成为选中状态
      checkedAll.checked = false;
      this.parentNode.style.background = '';
     }else{
      this.parentNode.style.background = '#f2f6f9';
      for(var j=0; j<singleLen;j++){
       if(!checkSingle[j].checked){
        isAll = false;//只要有一个单选按钮是未选中状态,那么isAll就为false,所以全选按钮就不能是选中状态,如果,都是选中状态,那么,这段代码不执行,所以isAll还是true, 那么全选按钮就变为选中状态
       }
      }
 
      if(isAll){
 
       checkedAll.checked = true;
      }
     }
 
    }
   }
   function checkInput(){//将单选按钮中是选中状态的放入一个数组中
    var arr = [];
    for(var i=0; i<singleLen; i++){
     if(checkSingle[i].checked){
      arr.push(checkSingle[i]);
     }
    }
    return arr;
   }
   //删除数据和结构
   var oDelet = document.querySelector('#delet');
   oDelet.onclick = function(){
    del();
 
   }
   function del(){
    var select = checkInput();
    for(var i=0; i<select.length;i++){//删除HTML结构中选中的input的父级
     select[i].parentNode.remove();
     //删除json中的数据
     for(var j=0; j<list.length;j++){
      if(list[j].id ==select[i].dataset.id){
       list.splice(j,1);
      }
     }
    }
   }
   var tip = document.querySelector('#hint3');
   var aLi = document.querySelectorAll('.emailListUl li');
   var delx = document.querySelector('.beenDel');
 
   var m = 0;
   for(var i=0; i<aLi.length; i++){
    aLi[i].onmousedown = function(){
     var isTr = false;
     var chInput = this.querySelector('input');
     if(!chInput.checked){
      return;
     }
     tip.style.display = 'block';
     tip.innerHTML = `选中${checkInput().length-m}封邮件`;//放入到数组中的数据是总共的数据,所以要先减去,上次删除的数据,才是这次要删除的数据
     document.onmousemove = function(ev){
      var ev = event||ev;
      ev.preventDefault();//默认情况下,选中状态拖拽时,会选中浏览器中的文字,所以要取消默认事件
      tip.style.left = ev.clientX + 1+ 'px';
      tip.style.top = ev.clientY + 1+'px';
      if(collision(tip,delx)){
       isTr = true;
      }
     }
     document.onmouseup = function(ev){
      tip.style.display = 'none';
      if(isTr){
       del();
       m=`${checkInput().length}`;//记录总共删除的数据
      }
      document.onmousemove = document.onmouseup = null;
     }
    }
   }
 
  }
</script>

上面就是我的总结,有什么问题或疑问欢迎提问和赐教。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
js验证密码强度解析
Mar 18 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 #Javascript
javascript操作向表格中动态加载数据
Aug 27 #Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 #Javascript
js实现批量删除功能
Aug 27 #Javascript
js利用拖放实现添加删除
Aug 27 #Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Javascript call及apply应用场景及实例
Aug 26 #Javascript
You might like
用php实现选择排序的解决方法
2013/05/04 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP之预定义接口详解
2015/07/29 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
深入研究React中setState源码
2017/11/17 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python中断多重循环的思路总结
2019/10/04 Python
Python中logger日志模块详解
2020/08/04 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
如何利用find命令查找文件
2016/11/18 面试题
党校培训思想汇报
2014/01/03 职场文书
元旦晚会策划方案
2014/02/18 职场文书
面试必备的求职信
2014/05/25 职场文书
争先创优心得体会
2014/09/12 职场文书
奖励申请报告范文
2015/05/15 职场文书
离婚起诉书范本
2015/05/18 职场文书
导游词之舟山普陀山
2019/11/06 职场文书