无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

微信小程序开发流程_js完成QQEmail邮件拖拽删除功用

时间:2021-01-05 11:26来源:微信小程序开发流程 作者:jianzhan 点击:
js完成QQ电子邮箱电子邮件拖动删掉作用 本文关键为大伙儿详尽详细介绍了js完成QQ电子邮箱电子邮件拖动删掉作用,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值
js实现QQ邮箱邮件拖拽删除功能       这篇文章主要为大家详细介绍了js实现QQ邮箱邮件拖拽删除功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现QQ邮箱邮件拖拽删除的具体代码,供大家参考,具体内容如下

步骤分析:

根据数据结构生成HTML结构 全选和单选功能的实现,以及当其为选中状态时它的父级的颜色变化的 点击删除,删除结构同时删除数据 给每一个li绑定mousedown,tip显示,并且定位在鼠标位置 鼠标移动时,tip跟随,取消默认行为 碰撞检测是否拖到“已删除”项 鼠标松开、删除结构和数据

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 

上面就是我的总结,有什么问题或疑问欢迎提问和赐教。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866