js实现QQ邮箱邮件拖拽删除功能
作者:冰雪为融 发布时间:2023-09-07 04:31:05
标签:js,邮件,拖拽删除
本文实例为大家分享了js实现QQ邮箱邮件拖拽删除的具体代码,供大家参考,具体内容如下
步骤分析:
根据数据结构生成HTML结构
全选和单选功能的实现,以及当其为选中状态时它的父级的颜色变化的
点击删除,删除结构同时删除数据
给每一个li绑定mousedown,tip显示,并且定位在鼠标位置
鼠标移动时,tip跟随,取消默认行为
碰撞检测是否拖到“已删除”项
鼠标松开、删除结构和数据
过程实现
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:;" >设置</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从后台获取数据,所以此处就不在写模拟的数据,只记录一下我的写作步骤。
<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
0
投稿
猜你喜欢
- 我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要。在网页
- 平面设计 常用尺寸 三折页广告 标准尺寸: (A4)210mm x 285mm普通宣传册 标准尺寸: (A4)210mm x 285mm文件
- 大部分情况下,这种动态生成的sql查询语句写法如下: 代码如下:select A表.字段1,A表.字段2,B表.字段返回,C表.字段返回 f
- 事实上,互联网用户浏览网页的习惯和顾客浏览商店中物品的习惯没有多大差别。用户打开一个新的页面,扫视一些文字,并点击第一个引起他兴趣的链接。在
- XML即可扩展标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可
- 上次谈到客户端和服务端的编码“陷阱”,其中对url编码只是提及带过,并没有做深入讨论,事实上由于浏览器环境的复杂和不一致性,我们也很容易掉进
- Bit-Packed Data TypesMySQL有一些存储类型使用一个值中的一些单个的比特位来紧凑的存储数据。纯技术上将,不管是底层的存
- 首先创建一个表Use Test;Create Table TableTest(`ID` mediumint(8) default '
- 本文实例讲述了PHP实现将浏览历史页面网址保存到cookie的方法。分享给大家供大家参考。具体如下:将浏览历史页面网址保存到cookie,大
- 今天老肥让我试试百度知道的新功能:插入地图。该功能需要登录才能操作,因此我意外的发现百度用户登录的弹出层变了。我很喜欢这个改进,利用TAB来
- 测试:IE6、IE7、FF3.014突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有新意的图片切换效果。
- 因为一个需求,因为自己想多了一点东西,最后发现了一个问题,一个很奇怪的问题。这个问题我想还是我自己当初想法上的出路导致的吧,但想不通为什么会
- 我们在做表单的时候经常会使用到这样的结构:<fieldset> <lege
- Debian Etch Linux上成功安装了MySQL 5.0.27 icc版本,并使用JDBC测试中文成功!中文问题的关键是全部使用UT
- 今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00),这就意味着Firefox3正式发布了。Firefox3有众多
- Window.ShowModalDialog使用手册 基本介绍: showModalDialog() (IE 4+ 支持) sho
- 现在的垃圾留言越来越智能,并且从留言内容几乎看不出来是垃圾留言,而大量的垃圾留言会导致文章可读性下降,并可能会被搜索引擎惩罚,经过一段时间的
- Dreamweaver快捷键大全,记住一些常用的快捷键会大大提高你的网页设计效率,如果你都使用快捷键,那么如果你去面试工作就容易被录取,呵呵
- * 前,我在公司做设计,当时就已经做到技术总监,Photoshop是自学的,当时觉得全世界比我Photoshop强的人也不在多数。七年前,
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的