码迷，mamicode.com
首页 > 其他好文 > 详细

滑动删除功能

时间：2017-10-12 13:04:43      阅读：197      评论：0      收藏：0      [点我收藏+]

标签：over   orange   title   jquery   ddc   bug   targe   doc   ref   

<!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();
//                            }
//                        }
            }
        });
    }
}

 

滑动删除功能

标签：over   orange   title   jquery   ddc   bug   targe   doc   ref   

原文地址：http://www.cnblogs.com/jcz1206/p/7451673.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！