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

2024-09-28 07:40:10

本文实例为大家分享了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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现拖拽元素选择和删除

本文实例为大家分享了js实现拖拽元素选择和删除的具体代码,供大家参考,具体内容如下我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择,现在我们就自己来实现一下类似的效果. 结果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *
js实现QQ邮箱邮件拖拽删除功能

本文实例为大家分享了js实现QQ邮箱邮件拖拽删除的具体代码,供大家参考,具体内容如下步骤分析: 根据数据结构生成HTML结构全选和单选功能的实现,以及当其为选中状态时它的父级的颜色变化的点击删除,删除结构同时删除数据给每一个li绑定mousedown,tip显示,并且定位在鼠标位置鼠标移动时,tip跟随,取消默认行为碰撞检测是否拖到"已删除"项鼠标松开.删除结构和数据过程实现 HTML代码 <body> <div class="wrap&qu
Android条目拖拽删除功能实例代码

项目中需求,要做条目条目拖拽删除效果,实际效果和QQ消息删除一样,侧滑有制定和删除. 效果图第一步效果图 1.0自定义控件 SwipeLayout 继承FrameLayout重写里面三个构造方法,分别调用initView(). 2.0在布局中使用自定义控件 3.0在initView()方法中,创建拖拽辅辅助工具 ViewDragHelper() 该方法需要传入回调 MyCallBack() 4.0,创建MyCallBack()回调,继承ViewDragHelper.Callback 在回调中
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

用Vue2实现移动端图片上传.压缩.拖拽排序.拖拽删除功能图片上传图片压缩拖拽排序.拖拽删除之前在公司开发过一段时间的移动端H5页面,有个功能就是要上传图片+压缩.参考了一下网上的方法,外加自己摸索的过程,最终实现了这个功能.后面在家闲的时候又加多了个长按选中图片,并且可以拖拽排序.拖拽到指定位置删除的功能. github地址:代码地址下面直接进入正题: 图片上传图片上传用的是HTML的input标签实现的.核心就是把获取到的文件通过FileReader转换成图片,代码如下: <inpu
js仿QQ邮箱收件人选择与搜索功能

之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下: 页面截图: 主要html代码: <#--左侧--> <div> <label>To:</label> <div id="divtxt" class="mailtxt_div"></div> <input type="hidden" name="messName" id="me
Android仿QQ未读消息--红点拖拽删除【源代码】

本Demo是一款仿qq未读消息拖拽删除的例子,继承RelativeLayout的WaterDrop实现了圆形图标功能.继承ImageView的CircleImageView圆形图片功能.效果非常不错.很适合有圆形设计的哥们.效果图片如下 CircleImageView核心代码 private void updateShaderMatrix() { float scale; float dx = 0; float dy = 0; mShaderMatrix.set(null); if (mBitm
JS基于面向对象实现的拖拽库实例

本文实例讲述了JS基于面向对象实现的拖拽库.分享给大家供大家参考.具体如下: 这是一个面向对象的JS拖拽库,可设置水平锁定.垂直锁定.锁定位置.锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-draw-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
基于jquery插件实现拖拽删除图片功能

本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片会回到原来的位置 <html> <head> <title></title> <style type="text/css"> #mydiv{ width:900px; background-color:#444; border:1px solid red} #mydiv2{ width
Android自定义ListView实现仿QQ可拖拽列表功能

我们大致的思路,其实是这样子的,也是我的设想,我们可以先去实现一个简单的ListView的数据,但是他的Adapter,我们可以用系统封装好的,然后传递进去一个实体类,最后自定义一个listview去操作,所以我们先把准备的工作做好,比如? list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a
js实现控制文件拖拽并获取拖拽内容功能

在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有drag.dragend.dragenter.dragexit(没有浏览器实现).dragleave.dragover.dragstart.drop,详细的内容可以看MDN. 其中,与拖拽文件相关的事件有dragenter(文件拖拽进).dragover(文件拖拽在悬浮).dragleave(文件拖
JS基于面向对象实现的拖拽功能示例

本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

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

相关推荐

随机推荐