本文實例為大家分享了js實現QQ郵箱郵件拖拽刪除的具體代碼，供大家參考，具體內容如下
步驟分析：
- 根據數據結構生成HTML結構
- 全選和單選功能的實現，以及當其為選中狀態時它的父級的顏色變化的
- 點擊刪除，刪除結構同時刪除數據
- 給每一個li綁定mousedown，tip顯示，并且定位在鼠標位置
- 鼠標移動時，tip跟隨，取消默認行為
- 碰撞檢測是否拖到“已刪除”項
- 鼠標松開、刪除結構和數據
過程實現
HTML代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<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從后臺獲取數據，所以此處就不在寫模擬的數據，只記錄一下我的寫作步驟。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<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> |
上面就是我的總結，有什么問題或疑問歡迎提問和賜教。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/lhjuejiang/article/details/79573263
