本文實例為大家分享了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跟隨，取消默認(rèn)行為
- 碰撞檢測是否拖到“已刪除”項
- 鼠標(biāo)松開、刪除結(jié)構(gòu)和數(shù)據(jù)
過程實現(xiàn)
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:;" >設(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拖拽的進(jìn)一步學(xué)習(xí),移動與拉伸JS拖拽的進(jìn)一步練習(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ù)，只記錄一下我的寫作步驟。
|
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結(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();//默認(rèn)情況下，選中狀態(tài)拖拽時，會選中瀏覽器中的文字，所以要取消默認(rèn)事件 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í)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/lhjuejiang/article/details/79573263
