在現代web應用的開發中，互動設計往往是至關重要的一環。使用者體驗好壞的決定因素之一就是適當的互動形式。
其中，左滑刪除（Swipe-to-Delete）被廣泛應用於清單項目或卡片等元素的刪除操作。如在郵件應用程式中刪除一封郵件，或在社群網路應用程式中刪除動態等。
在傳統的web開發中，實作左滑刪除通常需要對DOM操作和樣式控制進行大量的手動處理。但現在，jQuery提供的事件和動畫庫大大簡化和豐富了實現左滑刪除的方式。
下面，我們將用jQuery實作簡單的左滑刪除效果。
首先，在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，實作將刪除按鈕滑動到元素內。
在處理完左滑刪除的互動後，同時也需要考慮如何實作刪除操作的邏輯。一種簡單的實作方式，就是使用jQuery的remove()方法刪除元素。這裡的實作方式就是在右滑刪除觸發後新增一個click事件監聽，在其中透過呼叫remove()方法將元素從DOM樹移除。
$(document).on("click",".delete",function(e){
e.stopPropagation();
$(this).parent().remove();
});上面的程式碼中，我們使用了jQuery的stopPropagation()方法，以防止點擊事件冒泡到父元素，影響左滑刪除的監聽。
最後，將上面兩部分程式碼放在一起，我們就可以得到一份完整的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中文網其他相關文章！
