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