H5左侧滑删除简单实现

简单的左滑删除

实现功能

在一个列表的一条中,往左滑动时,右边出现删除按钮,点击可删除这一条

实现办法

列表中一项为父div,其中包含内容div和删除按钮span 父div相对定位,设置宽度.内容div宽度与父div宽度一样.内容和按钮都绝对定位,并且内容zindex在按钮之上 这样,就将按钮遮住了.然后在内容上绑定touchstart和touchmove事件.计算坐标的移动判断出是左还是右. 根据左和右来改变内容的left值.当内容的left值向左移动一段距离,那么删除按钮就露出来了.可将这段距离设为 删除按钮的宽度.当内容向右移动时,再将left值设为0.这样就实现了.

---

点击绿色查看效果

第一条

删除

 

CSS:

  .moveleft{
            transform:translateX(-50px);/*改变位置时,可以添加或删除这个C3类.效果是水平移动50像素.正负表示方向*/
        }
        .itembox {
            position:relative;/*父DIV相对定位*/
            width: 400px;/*要设置宽度*/
            font-size:16px;
        }
        .itemcont {
            z-index:1;/*内容层在按钮上*/
            position:absolute;/*绝对定位*/
            width: 400px;/*与父DIV宽度一样*/
            height: 34px;
            line-height: 34px;
            background-color:green;
        }

        .itemdelbtn {
            position:absolute;/*绝对定位*/
            right:0;top:0;/*在最右边*/
            display: inline-block;
            width: 50px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            background-color: red;
        }

js:

 function moveleft(thisobj)
            {
            var p = $(thisobj).position();
            if (p.left < 0)
                thisobj.style.left=0+'px';
            else
                thisobj.style.left = -50+'px';
        }
        (function TouchLeft()
        {
            var startX, startY, moveEndX, moveEndY, X, Y;
            $(".itemcont").on("touchstart", function (e)
            {
                 //e.preventDefault();
                startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
            });
            $(".itemcont").on("touchmove", function (e)
            {
                 //e.preventDefault();
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;

                if (Math.abs(X) > Math.abs(Y) && X < 0) {  //从右侧向左滑动
                    $(this).css('left', '-50px');
                } else if (Math.abs(X) > Math.abs(Y) && X > 0) { $(this).css('left', '0'); }
            });
        })()