滑动删除功能

Posted 2020-10-10 JIN小坏

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滑动删除功能相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <title>JQM Swipe Delete</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <style>
    .behind {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }
    .behind a.ui-btn {
        width: 68px;
        margin: 0px;
        float: right;
        border: none;
    }
    .behind a.delete-btn, .behind a.delete-btn:active, .behind a.delete-btn:visited, .behind a.delete-btn:focus, .behind a.delete-btn:hover {
        color: white;
        background-color: red;
        text-shadow: none;
    }
    .behind a.ui-btn.pull-left {
        float: left;
    }
    .behind a.edit-btn, .behind a.edit-btn:active, .behind a.edit-btn:visited, .behind a.edit-btn:focus, .behind a.edit-btn:hover {
        color: white;
        background-color: orange;
        text-shadow: none;
    }
    
    .swipe-delete li a span{  display:inline-block; width:100px; background-color:#888;}
    .swipe-delete li { height: 50px;
    line-height: 50px;
    display: block;
    border:solid 1px #444;
    position:relative;
}.swipe-delete li a{ height: 50px;
    line-height: 50px;
    display: block;
    border:solid 1px #444;
        z-index: 18;
    position: relative;
    background-color: #fff;
}
.behind { }
/* body{touch-action: none;} */
    </style>
    <script>
    
function add(t){
t.innerHTML=t.innerHTML+1;
}
    </script>
</head>

<body>
    <div id="container">
        <div data-role="page">
            <div data-role="header" data-position="fixed">
                <h1>Swipe Delete</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" class="swipe-delete">
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 1<span onclick="add(this)">0</span></a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 2<span onclick="add(this)">0</span></a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 3<span onclick="add(this)">0</span></a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 4<span onclick="add(this)">0</span></a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 5</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 6</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 7</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 8</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 9</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 10</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 11</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 12</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 13</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 14</a>
                    </li>
                    <li>
                        <div class="behind">
                            <a href="#" class="ui-btn delete-btn">Delete</a>
                            <a href="#" class="ui-btn edit-btn pull-left">Edit</a>
                        </div>
                        <a href="#">item 15</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script><script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>-->
<script type="text/javascript">
$(function() {

    function prevent_default(e) {
        e.preventDefault();
    }

    function disable_scroll() {
        $(document).on(‘touchmove‘, prevent_default);
    }

    function enable_scroll() {
        $(document).unbind(‘touchmove‘, prevent_default)
    }

    var x;
    var y;
    var sy;
    $(‘.swipe-delete li > a‘)
        .on(‘touchstart‘, function(e) {
            //console.log(e.originalEvent.pageX)
            $(‘.swipe-delete li > a.open‘).css(‘left‘, ‘0px‘).removeClass(‘open‘) // close em all
            $(e.currentTarget).addClass(‘open‘)
            x = e.originalEvent.targetTouches[0].pageX // anchor point
            y = e.originalEvent.targetTouches[0].pageY // anchor point
            sy=$(document).scrollTop();
        })
        .on(‘touchmove‘, function(e) {
            var change = e.originalEvent.targetTouches[0].pageX - x
            var changeY = e.originalEvent.targetTouches[0].pageY - y
            var changeSy=$(document).scrollTop()-sy;
            if(Math.abs(changeSy)<20&&Math.abs(change)>Math.abs(changeY)&&getAngle(change,changeY)==3) {
                change = Math.min(Math.max(-100, change), 100) // restrict to -100px left, 0px right
                e.currentTarget.style.left = change + ‘px‘
                if (change < -10) disable_scroll() // disable scroll once we hit 10px horizontal slide
            }else{
                e.currentTarget.style.marginLeft = ‘0px‘
                // disable_scroll()
            }
        })
        .on(‘touchend‘, function(e) {
            var left = parseInt(e.currentTarget.style.left)
            var new_left;
            if (left < -35) {
                new_left = ‘-100px‘
            } else if (left > 35) {
                new_left = ‘100px‘
            } else {
                new_left = ‘0px‘
            }
            // e.currentTarget.style.left = new_left
            $(e.currentTarget).animate({left: new_left}, 200)
            enable_scroll()
        });

    $(‘li .delete-btn‘).on(‘touchend‘, function(e) {
        e.preventDefault()
        $(this).parents(‘li‘).slideUp(‘fast‘, function() {
            $(this).remove()
        })
    })

    $(‘li .edit-btn‘).on(‘touchend‘, function(e) {
        e.preventDefault()
        $(this).parents(‘li‘).children(‘a‘).html(‘edited‘)
    })

});


        //返回角度
        function GetSlideAngle(dx,dy) {
            return Math.atan2(dy,dx) * 180 / Math.PI;
        }
        function getAngle(dx,dy){
            //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
            var result = 0;

            //如果滑动距离太短

            if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

                return result;

            }

            var angle = GetSlideAngle(dx, dy);

            if (angle >= -45 && angle < 45) {

                result = 4;

            }else if (angle >= 45 && angle < 135) {

                result = 1;

            }else if (angle >= -135 && angle < -45) {

                result = 2;

            }else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

                result = 3;

            }
            console.log(result);
            return result;
        }
</script>

</html>

js方式有bug 不知道问题在哪里

       moveDel($(‘.shopcartmove‘),function(o,lx){console.log("=");
            $(".shopcart").removeAttr("style");
            $(".shopcartall").removeClass("selected");
            if(lx){
                $(o).parents(".shopcart").css("margin-left",lx+"px");
            }else {
                $(o).parents(".shopcartall").addClass("selected");
            }
        },function(o,rx){
            if(rx){console.log("==");
                var mleft=parseInt($(o).parents(".shopcart").css("margin-left"));
                if($(o).parents(".shopcartall").hasClass("selected")||mleft) {
                    $(o).parents(".shopcart").css("margin-left", (mleft+rx)<=0?(mleft+rx):0 + "px");
                }
                if(rx<-10){
                    $(document).on(‘touchmove‘, function(e){e.preventDefault();});
                }
            }else {
                $(o).parents(".shopcartall").removeClass("selected");
            }
        },function(){
        },function(o, type){console.log("====");
            $(".shopcart").removeAttr("style");
            $(".shopcartall").removeClass("selected");
            if(type==0){
                $(o).parents(".shopcartall").addClass("selected");
            }
            $(document).unbind(‘touchmove‘,function(e){e.preventDefault();})
        });
/*
        $(document).on(‘touchmove‘, function (e) {
            e.preventDefault();
        });
        $(".numoperate").on(‘touchmove,touchend‘, function (e) {
            e.preventDefault();
            e.stopPropagation();
        });
        $(‘#shop_cart_all‘).on(‘touchmove‘, function (e) {
            e.stopPropagation();
        });*/




/**
 * 删除按钮的touch事件
 * @param container
 * @param touchleft
 * @param touchright
 */
function moveDel(container,touchleft,touchright,touchbegin,touchfinish) {
    for(var i = 0; i < container.length; i++){
        var x=0, y=0, X=0, Y=0, swipeX=0, swipeY=0, xm=70;
        container[i].addEventListener(‘touchstart‘, function (event) {
            x = event.changedTouches[0].pageX;
            y = event.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true;
            touchbegin();
            //                if (expansion) { //判断是否展开，如果展开则收起
            //                    expansion.className = "";
            //                }
        });
        container[i].addEventListener(‘touchmove‘, function (event) {
            X = event.changedTouches[0].pageX;
            Y = event.changedTouches[0].pageY;
            // 左右滑动
            if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
                // 阻止事件冒泡
                event.stopPropagation();
                if ((x - X > 0)&&(x - X <xm)) { //左滑
                    touchleft(this,X - x);
                    event.preventDefault();
                    //                        this.className = ""; //右滑收起
                }
                if (x - X == xm) { //左滑
                    touchleft(this);
                    event.preventDefault();
                    //                        this.className = "swipeleft"; //左滑展开
                    //                        expansion = this;
                }
                if ((X - x > 0)&&(X - x < xm)) { //右滑
                    touchright(this,X - x);
                    event.preventDefault();
                    //                        this.className = ""; //右滑收起
                }
                if (X - x == xm) { //右滑
                    touchright(this);
                    event.preventDefault();
                    //                        this.className = ""; //右滑收起
                }
                swipeY = false;
            }
            //                // 上下滑动
            //                if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
            //                    swipeX = false;
            //                }
        });
        container[i].addEventListener(‘touchend‘, function (event) {
            if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
                swipeX = false;
                swipeY = false;
                // 阻止事件冒泡
                event.stopPropagation();
                if(x - X> 0) {
                    if(x - X > 35&& X>0) {//左滑位移够 展开
                        console.log("x:" +x+"X:"+X);
                        console.log("--");
                        touchfinish(this, 0);
                        event.preventDefault();
                    }else{//左滑位移不够 收起
                        console.log("---");
                        touchfinish(this, 1);
                        event.preventDefault();
                    }
                    x=0; X=0;
                }else{
                    if(x - X < 8) {//右滑位移够 收起
                        touchfinish(this, 1);
                        event.preventDefault();
//                            }else{//右滑位移够 展开
//                                touchfinish(this, 0);
//                                event.preventDefault();
                    }
                    x=0; X=0;
                }

//                        if(Math.abs(x - X)>35){
//                            if(x - X > 0) {//左滑位移够 展开
//                                touchfinish(this, 0);
//                                event.preventDefault();
//                            }else{//右滑位移够 收起
//                                touchfinish(this, 1);
//                                event.preventDefault();
//                            }
//                        }else{
//                            if(x - X> 0) {//左滑位移不够 收起
//                                touchfinish(this, 1);
//                                event.preventDefault();
//                            }else{//右滑位移够 展开
//                                touchfinish(this, 0);
//                                event.preventDefault();
//                            }
//                        }
            }
        });
    }
}

以上是关于滑动删除功能的主要内容，如果未能解决你的问题，请参考以下文章

底部应用栏在使用片段导航时向上/向下滑动（导航架构组件）

如何在像 snapchat 故事一样从底部滑动到顶部 android 时打开底部工作表片段

滑动时 ViewPager 更新片段

我的片段中有 webview，当滑动 webview 时， viewPager 也开始滑动

用ionic做的列表向左滑动，出现删除等功能按钮

我的应用程序使用片段，但我需要从左到右从右向左滑动