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:;/*内容层在按钮上*/
            position:absolute;/*绝对定位*/
            width: 400px;/*与父DIV宽度一样*/
            height: 34px;
            line-height: 34px;
            background-color:green;
        }
 
        .itemdelbtn {
            position:absolute;/*绝对定位*/
            right:;top:;/*在最右边*/
            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'); }
             });
         })()