jquery horizontal drag to delete

With the continuous development of Internet technology, the demand for interactivity of website pages is getting higher and higher. Horizontal dragging and deletion is one of the more common interaction scenarios. When implementing this function, jQuery is a very useful tool that can help us quickly implement this function. This article will introduce in detail how to use jQuery to implement the horizontal drag and delete function.

1. Functional requirements

Before the specific implementation, let’s first take a look at the functional requirements:

1. When the mouse clicks on an element, the element changes to is draggable.
2. As the mouse is dragged horizontally, the element moves with the mouse.
3. When the distance between the element and the right edge of the page reaches a certain value, the element automatically disappears.
4. During the dragging process, you can delete the element by releasing the mouse or dragging the element to the specified area.

2. Implementation steps

With the functional requirements in mind, the specific implementation can begin. The specific steps are as follows:

1. Introduce the jQuery library

Before implementing this function, you first need to introduce the jQuery library into the HTML page. In this article, we will introduce jQuery's CDN link, the code is as follows:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Add HTML elements

Add elements that need to be dragged and deleted in the HTML page, the code is as follows:

<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>
<div class="item">元素4</div>
<div class="item">元素5</div>

Among them, .item is the class name we added to each element, which will be used later.

3. Add CSS style

Set the corresponding style for each element. The code is as follows:

.item {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    float: left;
    cursor: move;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Among them, the width, height, background color, and circle of the element are set. Corner, text centering, right margin, floating and mouse style and other related properties, and a clearfix class is added for clearing floating.

4. Add JS interaction code

Add the corresponding JS code to realize the drag and delete function. The code is as follows:

$(function () {
    var startX = 0;
    var endX = 0;
    var offsetX = 0;
    var isMoved = false;
 
    // 当鼠标按下时
    $('.item').on('mousedown', function (e) {
        startX = e.clientX;
        $(this).css('cursor', 'grabbing');
        isMoved = false;
    });
 
    // 当鼠标移动时
    $(document).on('mousemove', function (e) {
        if (startX === 0) {
            return;
        }
        endX = e.clientX;
        offsetX = endX - startX;
        $('.item').css('transform', 'translateX(' + offsetX + 'px)');
        if (Math.abs(offsetX) > 10) {
            isMoved = true;
        }
    });
 
    // 当鼠标抬起时
    $(document).on('mouseup', function () {
        $('.item').css('transform', 'translateX(0px)');
        $('.item').css('cursor', 'move');
 
        if (isMoved) {
            if (offsetX > 100) {
                $(this).remove();
            }
        }
        startX = 0;
        endX = 0;
        offsetX = 0;
        isMoved = false;
    });
});

The above code realizes that when the mouse is pressed, Add the corresponding transform attribute to the element so that the element moves with the mouse, and determine whether the element needs to be deleted during the dragging process.

3. Notes

When implementing the horizontal drag and delete function, you need to pay attention to the following points:

1. Add the corresponding cursor for each element Attributes enable the corresponding mouse style to be displayed when the mouse is on the element.

2. When using the transform attribute, you need to use a specific browser kernel to be compatible with different browsers.

3. It is necessary to perform anti-shake processing on mouse movement events to avoid frequent redraws that cause the browser to freeze.

4. Summary

Through the above steps, we successfully implemented the horizontal drag and delete function using jQuery. In actual development, you can also add animation effects to improve the user interaction experience. I hope this article will be helpful to you, and I also hope that you can flexibly use jQuery and its related technologies in future actual development to achieve richer interactive effects.

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