移动端左划删除

Html

Css

 .prescribBox {
	width:90%;
	/* overflow-x:scroll;
	*/
	    	overflow:hidden;
	margin:20px auto;
}
::-webkit-scrollbar {
	display:none;
	/* Chrome Safari */
}
.prescribBox:last-child {
	margin-bottom:40px;
}
.prescribContent {
	width:calc(100% + 100px);
	display:flex;
	position:relative;
}
.delPrescribing {
	width:100px;
	float:right;
	display:flex;
	align-items:center;
	justify-content:center;
}
.prescribing {
	width:calc(100% - 100px);
	float:left;
	border-radius:4px;
	background-color:#fff;
	overflow:hidden;
	padding:10px;
	display:flex;
	position:relative;
	box-shadow:0px 12px 28px 0px rgba(0,0,0,0.05),0px 2px 4px 0px rgba(0,0,0,0.05);
}

// 用于记录被按下的对象
var lastX, lastXForMobile;
var pressedObj; // 当前左滑的对象
var lastLeftObj; // 上一个左滑的对象
// 用于记录按下的点
var start;
setTimeout(() => {
    let lines = $(".prescribContent");
    for (var i = 0; i < lines.length; ++i) {
        lines[i].addEventListener('touchstart', function(e) {
            lastXForMobile = e.changedTouches[0].pageX;
            pressedObj = this; // 记录被按下的对象
            // 记录开始按下时的点
            var touches = event.touches[0];
            start = {
                x: touches.pageX, // 横坐标
            };
        });

lines[i].addEventListener('touchmove', function(e) {
            // 计算划动过程中x和y的变化量
            var touches = event.touches[0];
            let delta = {
                x: touches.pageX - start.x,
            };
        });

lines[i].addEventListener('touchend', function(e) {
            var diffX = e.changedTouches[0].pageX - lastXForMobile;
            if (diffX < -30) {
                $(pressedObj).animate({
                    left: "-100px"
                }, 250); // 左滑
                lastLeftObj && lastLeftObj != pressedObj &&
                    $(lastLeftObj).animate({
                        left: "0"
                    }, 500); // 已经左滑状态的按钮右滑
                lastLeftObj = pressedObj; // 记录上一个左滑的对象
            } else if (diffX >= -30 && diffX <= 30) {
                $(pressedObj).animate({
                    left: "0"
                }, 250);
                $(lastLeftObj).animate({
                    left: "0"
                }, 250);
            } else if (diffX > 30) {
                if (pressedObj == lastLeftObj) {
                    $(pressedObj).animate({
                        left: "0"
                    }, 250); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
            }
        });

}

}, 1000)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

移动端左划删除



代码描述：移动端触屏左划删除，注意只支持移动端PC端无效果

更新时间：2020-10-18 22:18:13
只支持移动

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

ご流浪青年╇

相关代码

移动端左划删除

最新