jquery的左滑刪除

在現代web應用的開發中，互動設計往往是至關重要的一環。使用者體驗好壞的決定因素之一就是適當的互動形式。

其中，左滑刪除（Swipe-to-Delete）被廣泛應用於清單項目或卡片等元素的刪除操作。如在郵件應用程式中刪除一封郵件，或在社群網路應用程式中刪除動態等。

在傳統的web開發中，實作左滑刪除通常需要對DOM操作和樣式控制進行大量的手動處理。但現在，jQuery提供的事件和動畫庫大大簡化和豐富了實現左滑刪除的方式。

下面，我們將用jQuery實作簡單的左滑刪除效果。

1. 實作基本互動

首先，在HTML頁面中，我們需要定義一個包含清單項目的容器元素，並在其中新增包含刪除按鈕的區塊元素。這裡使用FontAwesome字體圖標庫提供的刪除圖標，同時還需要為刪除按鈕添加一些基本的樣式：

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete"> <i class="fa fa-trash"></i> </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

上面的程式碼定義了一個高度為50像素的列表項容器，其中包含了一個span元素（用於展示清單項目內容）和一個刪除按鈕元素。容器元素設定了overflow：hidden屬性，以隱藏刪除按鈕元素。刪除按鈕元素設定了絕對定位和右側的負偏移，以便實現左滑刪除時的動畫效果。

接下來，為刪除按鈕元素新增jQuery滑鼠觸碰事件監聽，處理左滑刪除的邏輯。由於左滑刪除的實現，本質上是滑鼠的移動距離導致刪除按鈕的位置發生變化，因此需要監聽滑鼠的移動事件。

$(document).on("mousemove swipeleft",".list-item",function(e){
    var $delete = $(this).find('.delete');
    var left = e.pageX - $(this).offset().left;   
    if (left > $(this).width()/2) {
        $delete.css('right', 0);
    } else {
        $delete.css('right', '-50px');
    }
});

在上面的程式碼中，我們使用了jQuery的on()方法來監聽滑鼠移動和touch事件（左滑事件）。然後取得到滑鼠相對於元素左側的距離，並根據元素寬度的一半來確定刪除按鈕的位置：如果滑鼠移動距離超過了元素寬度的一半，則刪除按鈕元素右偏移動畫過渡到0，否則右偏移動畫過渡到-50px，實作將刪除按鈕滑動到元素內。

2. 新增刪除動作

在處理完左滑刪除的互動後，同時也需要考慮如何實作刪除操作的邏輯。一種簡單的實作方式，就是使用jQuery的remove()方法刪除元素。這裡的實作方式就是在右滑刪除觸發後新增一個click事件監聽，在其中透過呼叫remove()方法將元素從DOM樹移除。

$(document).on("click",".delete",function(e){
    e.stopPropagation();
    $(this).parent().remove();
});

上面的程式碼中，我們使用了jQuery的stopPropagation()方法，以防止點擊事件冒泡到父元素，影響左滑刪除的監聽。

3. 完整程式碼

最後，將上面兩部分程式碼放在一起，我們就可以得到一份完整的jQuery左滑刪除實作程式碼。

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete">
        <i class="fa fa-trash"></i>
    </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on("mousemove swipeleft",".list-item",function(e){
        var $delete = $(this).find('.delete');
        var left = e.pageX - $(this).offset().left;   
        if (left > $(this).width()/2) {
            $delete.css('right', 0);
        } else {
            $delete.css('right', '-50px');
        }
    });

    $(document).on("click",".delete",function(e){
        e.stopPropagation();
        $(this).parent().remove();
    });
</script>

程式碼僅是jQuery左滑刪除的簡單範例，並不包含完全的細節處理和合適性最佳化，讀者可以根據自己需求進行適當的修改和擴充。

以上是jquery的左滑刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章！