How to use HTML, CSS and jQuery to implement the advanced function of sliding to delete list items

How to use HTML, CSS and jQuery to implement the advanced function of sliding to delete list items

In modern web development, sliding to delete is a common user interaction function that allows Users delete list items using swipe gestures. This article explains how to use HTML, CSS, and jQuery to implement this advanced functionality, and provides specific code examples.

1. Create HTML structure

First, we need to create a basic HTML structure to display list items. This can be achieved using unordered lists (

) and list items (
• ).

  <ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
  </ul>

  2. Add CSS style

  In order to achieve the sliding deletion effect, we need to use CSS to set the style of the list items, and use some CSS animation effects to achieve sliding Effect.

  li {
    position: relative;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }
  
  li.slideout {
    transition: all 0.3s ease-out;
    transform: translateX(0);
  }
  
  li.sliding {
    transition: all 0.3s ease-out;
  }
  
  li.delete {
    background: #ff4f4f;
    color: #fff;
  }
  
  .li-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: #ff4f4f;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  In the above CSS code, we set the basic style of the list items and also defined some class names related to animation effects, such as .slideout, .sliding and .delete. At the same time, we also define the style of a "Delete" button.

  3. Use jQuery to achieve the sliding delete effect

  Next, we need to use jQuery to achieve the sliding delete effect. We can do this by binding events on the li element.

  $(document).ready(function() {
    var sliding = false;
    var startX = 0;
    var deltaX = 0;
    var threshold = 50;
  
    $('#list li').on('touchstart', function(event) {
      startX = event.originalEvent.touches[0].pageX;
      deltaX = 0;
    });
  
    $('#list li').on('touchmove', function(event) {
      if (sliding) {
        deltaX = event.originalEvent.touches[0].pageX - startX;
        if (deltaX < -threshold) {
          $(this).addClass('sliding');
        } else if (deltaX > threshold) {
          $(this).removeClass('sliding');
        }
        event.preventDefault();
      }
    });
  
    $('#list li').on('touchend', function(event) {
      sliding = false;
      if (deltaX < -threshold) {
        $(this).addClass('slideout');
      } else if (deltaX > threshold) {
        $(this).removeClass('sliding');
      }
    });
  
    $('.li-delete-btn').on('click', function(event) {
      $(this).closest('li').addClass('delete');
      $(this).closest('li').slideUp(300).remove();
    });
  });

  In the above jQuery code, we bound the following events:

  • touchstart: Record the starting position when the touch starts;
  • touchmove: Update the position during the sliding process, and determine whether to perform sliding deletion animation based on the sliding distance;
  • touchend: When the touch ends, based on the sliding distance Determine whether to perform sliding deletion animation;
  • click: perform deletion animation when the "Delete" button is clicked.

  So far, we have completed the advanced function of sliding to delete list items using HTML, CSS and jQuery. Users can delete one or more list items through sliding gestures to manage data more conveniently. By flexibly using HTML, CSS and jQuery, we can achieve various unique user interaction effects and functions and improve the user experience of web applications.

  Note: The above code is only an example and needs to be modified and optimized according to specific needs for actual use.

The above is the detailed content of How to use HTML, CSS and jQuery to implement the advanced function of sliding to delete list items. For more information, please follow other related articles on the PHP Chinese website!