jquery+原生实现滑动删除效果

刚写完项目，难得有空闲时间，记录一下滑动删除效果所遇到的坑。。

使用的方法事件：

touchstart

touchmove

touchend

dblclick (使用dblclick主要是为了PC端也能正常使用删除功能，如果嫌双击麻烦，改为click也可以)

本来打算直接使用jquery去写的，但是写着写着发现，preventDefault()和stopPropagation()阻止默认事件不起作用，后来一番google百度之后，才发现google浏览器在56版本之后，默认开启了passive:true,导致浏览器忽略了检测函数内的preventDefault()和stopPropagation()。而我使用的是jquery1.11版本，不知道是不是版本太低的原因，没办法修改passive，所以只能使用jquery+原生结合了。

还有一点需要注意的是，如果使用position:relative或者margin来改变元素位置，在ios设备下，手指离开屏幕后再次滑动会不起作用。使用position:absolute则正常。（待大神来回答这个问题。）

滑动删除功能还有点小瑕疵，如果哪位大神能发现问题。完善一下再发我一个版本，那就太感谢了。。。

废话不多说，下面直接上代码了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>滑动删除</title>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <style type="text/css">
        * {
            margin:0 auto;
            padding: 0;
            touch-action: none;
        }

        body{
            overflow: hidden;
        }

        .list-box{
            width: 100%;
            height: 65px;
            overflow: hidden;
            border-bottom: 1px solid #000000;
        }

        .touch-box{
            position: absolute;
            left:0;
        }

        .touch-box .touch{
            width:100%;
            height:65px;
            background:#66bb6a;
            float: left;
        }

        .touch-box .del{
            width:100px;
            height:65px;
            line-height:65px;
            color: #fff;
            text-align: center;
            background:#ff0000;
            float: left;
        }
    </style>
</head>
<body>
    <div id="slideDeleteBox">
        <div class="list-box">
            <div class="touch-box">
                <div class="touch">
                    <p>滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除滑动删除</p>
                </div>
                <div class="del">
                    删除
                </div>
            </div>
        </div>
        <div class="list-box">
            <div class="touch-box">
                <div class="touch">2</div>
                <div class="del">
                    删除
                </div>
            </div>
        </div>
    </div>

    <div id="d"></div>

    <script type="text/javascript">
        (function () {
            var obj = {
                move: 0,
                startTouchSite: 0,
                disX: 0,
                init: function(){
                    var winWidth = $(window).width();
                    var delWidth = $("#slideDeleteBox .del").css("width");
                    var sumWidth = winWidth + parseInt(delWidth);

                    $(".touch-box").css("width",sumWidth+'px');
                    $(".touch").css("width",winWidth+'px');

                    obj.bindEvent();
                    return obj;
                },
                bindEvent: function(){
                    if(!obj.isPC()) {
                        $(".touch-box").each(function (i) {
                            document.getElementsByClassName('touch-box')[i].addEventListener('touchstart', function (event) {
                                var e = event || window.event;
                                    e.preventDefault();
                                    e.stopPropagation();

                                var touchPosition = e.targetTouches[0];
                                var touch_x = touchPosition.pageX;
                                var offsetLeft = $(this).offset().left;

                                obj.move = 0;
                                obj.startTouchSite = touch_x;
                                obj.disX = touch_x - offsetLeft;

                                $(".open").each(function () {
                                    if ($(this).css('left') !== "0px") {
                                        $(this).animate({'left': '0'}, 300);
                                    }
                                });

                                if ($(this).css('left') === '-100px') {
                                    $(this).animate({'left': '0'}, 300, function () {
                                        if (!$(this).is(":animated")) {
                                            var offsetLeft = $(this).offset().left;
                                            obj.disX = touch_x - offsetLeft;
                                        }
                                    });
                                }
                            }, {passive: false});

                            document.getElementsByClassName('touch-box')[i].addEventListener('touchmove', function (event) {
                                var e = event || window.event;
                                    e.preventDefault();
                                    e.stopPropagation();

                                var touchPosition = e.targetTouches[0];
                                var touch_x = touchPosition.pageX;
                                var left = $(this).css('left');
                                $('.touch-box').eq(i).stop();

                                obj.move = touch_x - obj.disX;

                                if (touch_x < obj.startTouchSite && obj.move < 0 && obj.move >= -100) {
                                    $(this).css('left', obj.move + 'px');
                                } else if (touch_x > obj.startTouchSite && obj.move < 0 && obj.move >= -100) {
                                    $(this).css('left', obj.move + 'px');
                                }
                            }, {passive: false});

                            document.getElementsByClassName('touch-box')[i].addEventListener('touchend', function (event) {
                                var e = event || window.event;
                                    e.preventDefault();
                                    e.stopPropagation();

                                if (obj.move < -50) {
                                    $(this).animate({'left': '-100px'}, 300);
                                    $(this).addClass('open');
                                } else {
                                    $(this).animate({'left': '0'}, 300);
                                    $(this).removeClass('open');
                                }
                            }, {passive: false});

                            document.getElementsByClassName('del')[i].addEventListener('touchstart', function (event) {
                                var e = event || window.event;
                                    e.preventDefault();
                                    e.stopPropagation();

                                var touch = e.targetTouches[0];

                                self.delTouchStartX = touch.pageX;
                                alert('移动删除请求');
                                return false;
                            }, {passive: false});
                        });
                    }else{
                        $(document).on("dblclick", ".touch", function () {
                            var left = $(this).parent().css('left');

                            $(".open").animate({'left': '0'}, 300, function () {
                                $(this).removeClass("open");
                            });

                            if(left === '-100px'){
                                $(this).parent().animate({'left': '0'}, 300);
                            }else{
                                $(this).parent().animate({'left': '-100px'}, 300, function(){
                                    $(this).addClass('open');
                                });
                            }
                        });

                        $(document).on("click", ".del", function () {
                            console.log('PC删除请求');
                            return false;
                        });
                    }
                },
                isPC: function(){
                    var userAgentInfo = navigator.userAgent;
                    var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
                    var flag = true;
                    for (var i = 0; i < agents.length; i++) {
                        if (userAgentInfo.indexOf(agents[i]) > 0) {
                            flag = false;
                            break;
                        }
                    }
                    return flag;
                }
            };
            window.slideDelete = new obj.init();
        })();
    </script>
</body>
</html>

jquery+原生实现滑动删除效果

猜你喜欢