js實現(xiàn)QQ郵箱郵件拖拽刪除功能

更新時間：2020年08月27日 09:56:05 作者：冰雪為融

這篇文章主要為大家詳細介紹了js實現(xiàn)QQ郵箱郵件拖拽刪除功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)QQ郵箱郵件拖拽刪除的具體代碼，供大家參考，具體內(nèi)容如下

步驟分析：

根據(jù)數(shù)據(jù)結(jié)構(gòu)生成HTML結(jié)構(gòu)
全選和單選功能的實現(xiàn)，以及當(dāng)其為選中狀態(tài)時它的父級的顏色變化的
點擊刪除，刪除結(jié)構(gòu)同時刪除數(shù)據(jù)
給每一個li綁定mousedown，tip顯示，并且定位在鼠標(biāo)位置
鼠標(biāo)移動時，tip跟隨，取消默認行為
碰撞檢測是否拖到“已刪除”項
鼠標(biāo)松開、刪除結(jié)構(gòu)和數(shù)據(jù)

過程實現(xiàn)

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:;" >設(shè)置</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">星標(biāo)郵件</li>
    <li class="groupMail">群郵件</li>
    <li class="draftBox">草稿箱</li>
    <li class="beenSent">已發(fā)送</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:;" >轉(zhuǎn)發(fā)</a>
    <a href="javascript:;" >舉報</a>
    <a href="javascript:;" >全部標(biāo)為已讀</a>
    <a class="selectIcon" href="javascript:;" >標(biāo)記為...</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拖拽的進一步學(xué)習(xí),移動與拉伸JS拖拽的進一步練習(xí)</p>
     </li> -->
    </ul>
   </div>
  </div>
 
 </div>
</div>
<div id="hint3" style="display:none;">選中2封郵件</div>

JS代碼

這里需要引入碰撞函數(shù)檢測的封裝函數(shù)和數(shù)據(jù)，但在實際的應(yīng)用一般是通過ajax從后臺獲取數(shù)據(jù)，所以此處就不在寫模擬的數(shù)據(jù)，只記錄一下我的寫作步驟。

<script>
  window.onload = function(){//利用map方法和es6生成HTML結(jié)構(gòu)
   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(){//全選效果的實現(xiàn)
    for(var i=0; i<singleLen; i++){
     checkSingle[i].checked = this.checked;
    }
 
     for(var j=0; j<singleLen;j++){//單選效果的實現(xiàn)
      if(this.checked) {//如果取消選擇，則將父級的顏色恢復(fù)為未選中狀態(tài)的顏色
       checkSingle[j].parentNode.style.background = '#f2f6f9';
      }else{//如果選擇，則將父級li的顏色變?yōu)檫x中的顏色
 
        checkSingle[j].parentNode.style.background = '';
      }
 
     }
 
   }
   for(var i=0; i<singleLen;i++){
    checkSingle[i].onclick = function(){
 
     if(!this.checked){//單擊單選按鈕時，如果是取消選擇，則讓全選的按鈕也為未選中狀態(tài)，否則的話如果是讓其變?yōu)檫x中狀態(tài)時，先要看看其他的單選按鈕是不是也都是選中狀態(tài)，如果是的話，就讓全選按鈕也成為選中狀態(tài)
      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;//只要有一個單選按鈕是未選中狀態(tài)，那么isAll就為false，所以全選按鈕就不能是選中狀態(tài)，如果，都是選中狀態(tài)，那么，這段代碼不執(zhí)行，所以isAll還是true， 那么全選按鈕就變?yōu)檫x中狀態(tài)
       }
      }
 
      if(isAll){
 
       checkedAll.checked = true;
      }
     }
 
    }
   }
   function checkInput(){//將單選按鈕中是選中狀態(tài)的放入一個數(shù)組中
    var arr = [];
    for(var i=0; i<singleLen; i++){
     if(checkSingle[i].checked){
      arr.push(checkSingle[i]);
     }
    }
    return arr;
   }
   //刪除數(shù)據(jù)和結(jié)構(gòu)
   var oDelet = document.querySelector('#delet');
   oDelet.onclick = function(){
    del();
 
   }
   function del(){
    var select = checkInput();
    for(var i=0; i<select.length;i++){//刪除HTML結(jié)構(gòu)中選中的input的父級
     select[i].parentNode.remove();
     //刪除json中的數(shù)據(jù)
     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}封郵件`;//放入到數(shù)組中的數(shù)據(jù)是總共的數(shù)據(jù)，所以要先減去，上次刪除的數(shù)據(jù)，才是這次要刪除的數(shù)據(jù)
     document.onmousemove = function(ev){
      var ev = event||ev;
      ev.preventDefault();//默認情況下，選中狀態(tài)拖拽時，會選中瀏覽器中的文字，所以要取消默認事件
      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}`;//記錄總共刪除的數(shù)據(jù)
      }
      document.onmousemove = document.onmouseup = null;
     }
    }
   }
 
  }
</script>

上面就是我的總結(jié)，有什么問題或疑問歡迎提問和賜教。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: