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