jquery left slide to delete

In the development of modern web applications, interaction design is often a crucial part. One of the determinants of good user experience is the appropriate form of interaction.

Among them, Swipe-to-Delete is widely used to delete elements such as list items or cards. For example, deleting an email in the mail application, or deleting an update in the social network application, etc.

In traditional web development, implementing left-swipe deletion usually requires a lot of manual processing of DOM operations and style control. But now, the event and animation libraries provided by jQuery have greatly simplified and enriched the way to implement left swipe to delete.

Next, we will use jQuery to implement a simple left-swipe delete effect.

1. Realize basic interaction

First, in the HTML page, we need to define a container element containing the list items and add a block element containing the delete button to it. The delete icon provided by the FontAwesome font icon library is used here, and some basic styles need to be added to the delete button:

<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>

The above code defines a list item container with a height of 50 pixels, which contains a span element (used to display the list item content) and a delete button element. The container element has the overflow:hidden attribute set to hide the delete button element. The delete button element is set with absolute positioning and a negative offset on the right side to achieve the animation effect when sliding left to delete.

Next, add jQuery mouse touch event monitoring for the delete button element to handle the logic of left-swipe deletion. Due to the implementation of left-swipe deletion, essentially the movement distance of the mouse causes the position of the delete button to change, so the mouse movement event needs to be monitored.

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

In the above code, we use jQuery's on() method to listen for mouse movement and touch events (left sliding events). Then get the distance of the mouse relative to the left side of the element, and determine the position of the delete button based on half the width of the element: if the mouse movement distance exceeds half the width of the element, the right offset animation of the delete button element transitions to 0, otherwise the right The offset animation transitions to -50px to slide the delete button into the element.

2. Add deletion operation

After processing the interaction of left swipe to delete, you also need to consider how to implement the logic of the deletion operation. A simple way to achieve this is to use jQuery's remove() method to delete elements. The implementation here is to add a click event listener after the right slide to delete is triggered, in which the element is removed from the DOM tree by calling the remove() method.

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

In the above code, we use jQuery's stopPropagation() method to prevent click events from bubbling up to the parent element and affecting left-swipe deletion monitoring.

3. Complete code

Finally, by putting the above two parts of code together, we can get a complete jQuery left slide delete implementation code.

<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>

This code is just a simple example of jQuery left-swipe deletion. It does not include complete detailed processing and suitability optimization. Readers can make appropriate modifications and extensions according to their own needs.

The above is the detailed content of jquery left slide to delete. For more information, please follow other related articles on the PHP Chinese website!