touch实现滑动删除

请用chrome手机模式查看或者在手机上查看（转载请注明出处）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Touch滑动</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" contect="Wt, wt9213@163.com" />
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
        background-color:#e3e3e3; 
    }
    .list{
        margin: 0 auto;
        max-width: 720px;
    }
    .item{
        position: relative;
        height: 50px;
        border-bottom:1px solid #e3e3e3;
    }
    .touchitem{
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 50px;
        font-size: 18px;
        z-index: 99;
        background-color: #fff;
    }
    .touchitem span{
        padding-left: 20px;
    }
    .delete{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20%;
        line-height: 50px;
        text-align: center;
        background-color:#DE2222;
        color: #fff;
        z-index: 0;
    }
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> <!-- 手机端使用zepto.js -->
</head>
<body>
<div class="list">
    <div class="item">
        <div class="touchitem"><span>滑动删除</span></div>
        <div class="delete">删除</div>
    </div>
     <div class="item">
        <div class="touchitem"><span>滑动删除</span></div>
        <div class="delete">删除</div>
    </div>
     <div class="item">
        <div class="touchitem"><span>滑动删除</span></div>
        <div class="delete">删除</div>
    </div>
</div>
<script>
        $(function() {
            $(".touchitem").on('touchstart', function(e) {
                var touch = e.targetTouches[0];
                sessionStorage.setItem("touchstartX", touch.pageX);   //存储touch到的起始x坐标
            });
            $(".touchitem").on('touchmove', function(e) {
                var touch = e.targetTouches[0];
                var x = touch.pageX;
                //move的坐标的起始的坐标判断，得出方向
                if (x + 15 < sessionStorage.touchstartX) {   //左
                    $(this).css({
                        "transform": "translate(-20%)"
                    });
        
                } else if (x - 15 > sessionStorage.touchstartX) {   //右
                    $(this).css({
                        "transform": "translate(0)"
                    });
                }
            });
        });
    </script>
</body>
</html>