HTML列表滑动出现删除块点击删除（平板手机适用）

最新推荐文章于 2024-07-25 11:52:08 发布

糖小萌~

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量407

点赞数

文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/qq_51247669/article/details/125293097

版权

代码：

<script type="text/javascript" src="js/delete.js"></script>
<script>
// 列表往左滑动可删除
    window.onload = function() { 
        var qslide = new qSlide('listItem', ajaxDel);
    }
    //delId为传回来的要删除的数据的ID
    function ajaxDel(delId) {

        console.info("后台删除请求在这里写" + delId);
    }
</script>

.js代码

(function(){
	
	var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
	hasTouch = 'ontouchstart' in window && !isTouchPad,	
	START_EV = hasTouch ? 'touchstart' : 'mousedown',
	MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
	END_EV = hasTouch ? 'touchend' : 'mouseup',
	CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup';
	var qSlide = function(cName,callBack){
		var that = this;
		that.cName = cName;
		var slideObjArr = document.getElementsByClassName(cName);//获取class为cName的元素

		if (slideObjArr.length>0) {
			for (var i = 0; i < slideObjArr.length; i++) {
				var el = slideObjArr[i];
				var div = that.createDelObj(el,i);//创建列表右侧的删除按钮
				that.initDelete(div,el,el.parentNode);
				that._bind(START_EV,el);
			}
		}
		that.callBack = callBack;

	};

	function getTargetEle(obj,cName){
		if (obj.className == cName) {
			return obj;
		}else{
			return getTargetEle(obj.parentNode,cName);
		}
	}

	qSlide.prototype = {
		handleEvent: function (e) {
			var that = this;
			switch(e.type) {
				case START_EV:
					if (!hasTouch && e.button !== 0) return;
						that._start(e);
					break;
				case MOVE_EV: that._move(e); break;
				case END_EV:
				case CANCEL_EV: that._end(e); break;
			}
		},
		createDelObj:function(obj,i){
			var self = this;
			obj.style.cssText += 'position: relative;';
			var div = document.createElement('div');
			div.className = 'delDiv';
			div.id = 'toBeDeletedId'+i;
			div.style.cssText = 'position: absolute;background:-webkit-linear-gradient(left, #ccc,#FFFFFF);background:-o-linear-gradient( #ccc,#FFFFFF);ackground:-moz-linear-gradient( #ccc,#FFFFFF);background:linear-gradient(to right, #ccc,#FFFFFF);z-index: 99;right: 0;top:0px;\
			height: 100%;width: 20%;text-align:center;line-height:80%;left:91%;  opacity: 0;-webkit-transition: opacity .1s;\
			-o-transition: opacity .6s;transition: opacity .1s;';
			var p = document.createElement('p');
			p.style.cssText = 'color: rgba(102, 102, 102, 1);font-size: 17px;';
			p.innerHTML = '删除';
			div.appendChild(p);
			obj.appendChild(div);
			return div;
		},
		initDelete:function(obj,delItem,slideParent){
			var self = this;
			obj.addEventListener('touchstart',  function(){
				//console.info(obj.className+','+slideParent.className);
				var p = obj.style.opacity;
				if (p == '1') {
					slideParent.removeChild(delItem);
					self.callBack(obj.getAttribute('id'));
				};

			});
		},
		_start:function(e){
			var self = this,point = hasTouch ? e.touches[0] : e;
			//记录手指按下的坐标
			self.startX = e.touches[0].pageX;
			self.startY = e.touches[0].pageY; 		
			self.actDir = '';//左右滑动标识
			self._bind(MOVE_EV, window);
			self._bind(END_EV, window);
			self._bind(CANCEL_EV, window);
			var obj = e.srcElement || e.target;
			obj = getTargetEle(obj,self.cName);
			self.obj = obj;
			self.slideParent = obj.parentNode;
			var delDiv = obj.getElementsByClassName('delDiv')[0];
			self.delDiv = delDiv;
		},
		_move:function(evt){			
			var self = this,point = hasTouch ? evt.touches[0] : evt;
			//兼容chrome android，阻止浏览器默认行为
			evt.preventDefault();
			//计算手指的偏移量
			var xDis = evt.touches[0].pageX - self.startX;
			var yDis = Math.abs(evt.touches[0].pageY - self.startY);
			var moveDis = Math.abs(xDis)>20?20:Math.abs(xDis);//滑动的横向距离
			
			if (yDis < 10) {//纵向距离在15像素内，精确到滑动的一行范围
				if (xDis < 0) {//向左滑
					self.delDiv.style.opacity = 1;
					self.delDiv.style.cssText += 'right:'+(moveDis-200)+'px;opacity:1';
					self.actDir = 'left';
				}else{//向右滑
					self.delDiv.style.cssText += 'right:-'+ moveDis+'px;opacity:1';
					self.actDir = 'right';
				}
			}else{
				self.actDir = '';
			}
		},
		_end:function(evt){
			var self = this;
			evt.preventDefault();
			var obj = evt.srcElement || evt.target;	
			if (self.actDir == 'left' && self.delDiv) {
				self.delDiv.style.cssText += 'right:0px;opacity:1';
				
			}else if(self.actDir == 'right'){
				console.info(self.actDir+'===right');
				var p =self.delDiv.style.opacity;
				if (p == '1') {
					self.delDiv.style.opacity = 0;
				}
			}
			self._unbind(MOVE_EV, window);
			self._unbind(END_EV, window);
			self._unbind(CANCEL_EV, window);
		},
		
		_bind: function (type, el, bubble) {
			el.addEventListener(type, this, !!bubble);
		},

		_unbind: function (type, el, bubble) {
			el.removeEventListener(type, this, !!bubble);
		}
	};
	if (typeof exports !== 'undefined') {
		exports.qSlide = qSlide;
	}else{
		window.qSlide = qSlide;
	}
})();

调用：

 <!--  列  -->
                                        <ul class="ulBody" style="padding-left: 0px;margin-top: 0px;">
                                            <li class="listItem">
                                                <div class="list flex-col">
                                                    <div class="list2 flex-row justify-between" style="margin-top: 4%;">
                                                        <div class="gongchengimg flex-col"></div>
                                                        <span >工程名称1</span>
                                            </li>