jQuery实现移动端左滑删除功能

最新推荐文章于 2024-07-08 10:19:38 发布

lamp_yang_3533

最新推荐文章于 2024-07-08 10:19:38 发布

阅读量4.6k

点赞数 2

分类专栏： Web前端文章标签： jquery 移动端左滑删除

本文链接：https://blog.csdn.net/lamp_yang_3533/article/details/78649505

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在手机移动端，经常需要实现类似微信聊天工具中的左滑动删除和右滑动恢复功能。

这里，我们可以直接使用jQuery来实现该效果。

基本原理：

利用jQuery中的touchstart、touchmove、touchend、touch事件和animate方法。
条目包裹区块（item_wrap）和里面的条目内容区块（item_top）采用相对定位，删除按钮（item_del）采用绝对定位。
条目内容区块默认是在删除按钮的上层，即它是盖住了删除按钮。向左滑动条目内容区块时，删除按钮就自动显示出来了。
滑动时，利用css的left属性实现实时滑动效果；touchend或touch时，利用animate方法实现动画效果。
向左滑动大于等于删除按钮的一半宽度时，touchend时才完全显示删除按钮；否则，恢复原状。
当删除按钮已处于完全显示状态时，可通过右滑或touch条目内容区块来恢复原状；touch删除按钮时，删除父元素节点。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端左滑删除、右滑恢复效果</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style> 
html {
    font-family:微软雅黑;
    font-size:16px;
}
body, div, p, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select{
    margin:0;
    padding:0;
}
.header, .footer {
    background-color: #ccc;
    border: 1px solid #aaa;
    height:6rem;
    font-size:2.5rem;
    text-align:center;
    line-height:6rem;
}
.footer {
    position: fixed;
    bottom:0;
    width:100%;
}
.item_wrap {
    position:relative;
    margin-top:1px;
    width:100%;
    text-align:center;
    height:6rem;
    line-height:6rem;
    font-size:2rem;
}
.item_wrap .item_top {
    position:relative;    
    top:0;
    border-bottom: 1px solid #888;
    background-color: #fff;
    overflow:hidden;
    z-index: 10;
}
.item_wrap .item_del {  /* 删除按钮位于条目内容的下一层 */
    position: absolute;
    background-color: #c00;
    top:0;
    right: 0;
    width: 15%;
    color: #fff;
    letter-spacing: 3px;
    z-index: 9;
}
</style>
</head>
<body>
<div>
    <div class="header">头部导航</div>

    <div class="main">
        <div class="item_list">
            <div class='item_wrap'>
                <div class='item_top'>测试条目1</div>
                <div class="item_del">删除</div>
            </div>
            <div class='item_wrap'>
                <div class='item_top'>测试条目2</div>
                <div class="item_del">删除</div>
            </div>
            <div class='item_wrap'>
                <div class='item_top'>测试条目3</div>
                <div class="item_del">删除</div>
            </div>
        </div>
    </div>

    <div class="footer">底部区域</div>
</div>
</body>
</html>

<script>
(function(){
    var start_x;   // touchstart时的水平起始位置
    var end_x;     // touchmove过程中的水平结束位置
    var touchmove = false;    // 标识是否成功触发了touchmove，默认没有触发。

    // on方法事件绑定，可将事件绑定到新添加的子元素上
    $(document).on("touchstart",'.item_top',function(e){ // 触摸开始时
        if (e.originalEvent.targetTouches) {
            start_x = e.originalEvent.targetTouches[0].pageX;
        } else {
            start_x = e.pageX;
        }
//    console.log(start_x);
    });

    $(document).on("touchmove",'.item_top',function(e){ // 触摸过程中... 
        var width = $('.item_del:first').width();   // 删除按钮的宽
        var left = $(this).css('left');
        if(start_x - end_x >= 5){
            touchmove = true;
        }

        if (e.originalEvent.targetTouches) {
            end_x = e.originalEvent.targetTouches[0].pageX;
        } else {
            end_x = e.pageX;
        }

        if(start_x - end_x >= 0) {  // touchmove 向左移动
            if(parseInt(left) > -width){
                $(this).css('left', end_x-start_x+'px');  // 移动效果
            }
        }else{  // 向右移动
            if(parseInt(left) <0){
                $(this).animate({left:0},500);  // 恢复原状（动画效果）
            }
        }
    });

    $(document).on("touchend",'.item_top',function(e){  // 触摸抬起时
        var width = $('.item_del:first').width();   // 删除按钮的宽
        var offset = start_x - end_x;     // 偏移量
        if(touchmove==false) {
            return;
        }

        if( offset > 0){   // 左滑动
            if(offset>=width/2){      // 偏移量大于等于删除按钮的一半
                $(this).animate({left:-width+'px'},500);  // 动画显示删除按钮
            }else{
                $(this).animate({left:0},500);  // 恢复原状
            }
        }
        touchmove = false;
    });

    $(document).on('touch', '.item_top',function(e){  // 点击主条目时，也可恢复原状
        var width = $('.product_item_del:first').width();   
        var left = $(this).css('left');
        if(parseInt(left)<0){
            $(this).animate({left:0},500);  // 恢复原状
        }
    });

    $(document).on('touch', '.item_del',function(e){  // 点击删除，删除父元素节点
        $(this).parent().remove();
    });
})();
</script>