2023jquery的左滑删除

在现代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的左滑删除的详细内容，更多请关注zzsucai.com其它相关文章！