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同时按下两个方向键
Dec 01 Javascript
JavaScript 继承的实现
Jul 09 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
JS 创建对象的模式实例小结
Apr 28 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简单系统查询模块代码打包下载
2008/06/07 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
[原创]图片分页查看
2006/08/28 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
python利用Guetzli批量压缩图片
2017/03/23 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python中的取模运算方法
2018/11/10 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
食品流通安全承诺书
2014/05/22 职场文书
校运会口号
2014/06/18 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
社区义诊通知
2015/04/24 职场文书
推广普通话的宣传语
2015/07/13 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS