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 相关文章推荐
JS截取字符串常用方法详细整理
Oct 28 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
js实现表格数据搜索
Aug 09 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
Python3多线程操作简单示例
2018/05/22 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python实现学员管理系统
2019/02/26 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
考试不及格的检讨书
2014/01/22 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
大学应届生的自我评价
2014/03/06 职场文书
企业读书活动总结
2014/06/30 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js