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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 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读取文件内容后清空文件示例代码
2014/03/18 PHP
YII中assets的使用示例
2014/07/31 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python列表list排列组合操作示例
2018/12/18 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python实时监控logstash日志代码
2020/04/27 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
活动总结怎么写啊
2014/05/07 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
专家推荐信范文
2015/03/26 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis