具体效果点击查看

具体的js代码如下：

<script>
        // 加载数据
        // 拼接字符串 ""  +  ""
        // ES6   模板字符串  ` ${} `
        var oUl = document.querySelector(".emailListUl");
        var oCheckAll = document.querySelector(".emailHead input");
        var oCheckSingle = oUl.getElementsByTagName("input");
        var oLi = oUl.children;
        var oTip = document.querySelector("#hint3");
        var oDelBtn = document.querySelector("#delet");
        var oBeenDel = document.querySelector(".beenDel");

        var oUlHTML = 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(" ");
        oUl.innerHTML = oUlHTML;



        // 点击全选
        oCheckAll.onclick = function () {
            [...oCheckSingle].forEach(function (item) {
                item.checked = oCheckAll.checked;
            })
            if (this.checked) {
                [...oLi].forEach(function (item) {
                    item.style.backgroundColor = "#f2f6f9";
                })
            } else {
                [...oLi].forEach(function (item) {
                    item.style.backgroundColor = "";
                })
            }


        };


        // 点击单选
        [...oCheckSingle].forEach(function (item) {
            item.onclick = function (ev) {
                var ev = ev || event;
                var isCheckedAll = [...oCheckSingle].every(function (item) {
                    return item.checked;
                })
                oCheckAll.checked = isCheckedAll ? true : false;
                this.parentNode.style.backgroundColor = this.checked ? "#f2f6f9" : "";
            }
            // 阻止点击单选框的时候出现小提示
            item.onmousedown = function (ev) {
                var ev = ev || event;
                ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
            }
        });


        // 点击li，出现tips
        [...oLi].forEach(function (item) {

            item.onmousedown = function (ev) {
                // 判断是否被选中
                var oInputSingle = this.querySelector("input");
                if (!oInputSingle.checked) {
                    return;
                }
                var checkedLen = checkedCount().length;
                var ev = ev || event;
                oTip.style.display = "block";
                oTip.style.left = ev.clientX + 3 + "px";
                oTip.style.top = ev.clientY + 3 + "px";
                oTip.innerText = `选中${checkedLen}封邮件`;

                var isCollision = false;

                document.onmousemove = function (ev) {
                    var ev = ev || event;
                    oTip.style.left = ev.clientX + 3 + "px";
                    oTip.style.top = ev.clientY + 3 + "px";

                    if (collision(oTip, oBeenDel)) {
                        isCollision = true;
                    }

                    ev.preventDefault();
                }
                document.onmouseup = function () {
                    oTip.style.display = "none";
                    document.onmousemove = document.onmouseup = null;
                    if (isCollision) {
                        del();
                    }
                }
            }

        })
        // 点击删除按钮
        oDelBtn.onclick = function () {
            del();
        }

        function checkedCount() {
            var checkedArr = [];
            [...oCheckSingle].forEach(function (item) {
                if (item.checked) {
                    checkedArr.push(item);
                }
            })
            return checkedArr;
        }

        function del(){
          var checkedArr=checkedCount();
          checkedArr.forEach(function(itemInput){
             // 删除li结构
             itemInput.parentNode.remove();
             // 删除数据
             list.forEach(function(item,index){
                if(itemInput.dataset.id==item.id){
                  list.splice(index,1);
                }
             })
          console.log(list);
          })

        }
       function getRect(obj){
		   return obj.getBoundingClientRect();
	   }
       function collision(obj1,obj2){
        	var obj1Rect = getRect(obj1);
        	var obj2Rect = getRect(obj2);
        
        	//两个矩形碰撞检测
        	var obj1Left = obj1Rect.left;
        	var obj1Right = obj1Rect.right;
        	var obj1Top = obj1Rect.top;
        	var obj1Bottom = obj1Rect.bottom;
        
        	var obj2Left = obj2Rect.left;
        	var obj2Right = obj2Rect.right;
        	var obj2Top = obj2Rect.top;
        	var obj2Bottom = obj2Rect.bottom;
        
        	if( obj1Right < obj2Left || obj1Left > obj2Right || obj1Bottom < obj2Top || obj1Top > obj2Bottom ){
        		return false;
        	}else{
        		return true;
        	}
            }  

</script>