html slide to delete

With the popularity of mobile devices, more and more websites and applications are beginning to focus on mobile user experience. Among them, sliding to delete has become a common operation method. This article will introduce how to use HTML and CSS to implement the sliding delete function.

1. HTML structure design

First of all, you need to design the list that needs to implement the sliding delete function in HTML, for example:

<ul>
  <li>
    <div class="item-content">
      <div class="item-title">列表标题</div>
      <div class="item-delete">
        <button>删除</button>
      </div>
    </div>
  </li>
</ul>

Among them, item- content is the main content of the list item, and item-delete is the delete button to be displayed when sliding to delete. It should be noted that the two elements item-content and item-delete need to be set to a fixed width so that the entire content can be displayed when sliding.

2. CSS style design

Next, you need to use CSS styles to design the list items, including setting the position, height, width and other attributes of each list item, and Set styles for the sliding delete button. You can use the following code to achieve this:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 60px 0 15px;
}

.item-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  padding-right: 15px;
  background: #f44336;
  color: #fff;
  text-align: center;
}

.item-delete button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

The above code sets basic styles such as fixed height, border, and background color for the list items, and sets absolute positioning for the two elements item-content and item-delete. Among them, the padding-right of item-content is set to 60px, while the width of item-delete is set to 60px, and a 15px gap is left on the right side of the delete button.

3. JavaScript to implement sliding deletion

Finally, JavaScript code needs to be used to implement the sliding deletion function. Specifically, the following aspects need to be considered:

• Listen to touchstart, touchmove, and touchend events, obtain the coordinates of the touch point on the screen using event.touches, and calculate the horizontal displacement of the touch point.
• Use transform attribute to achieve sliding effect.
• Determine whether the delete button needs to be displayed based on the sliding distance, and implement the delete function when the touch ends.

The following is the specific implementation code:

var startX, moveX, delWidth = 60;
var list = document.getElementsByTagName('li');

for (var i = 0; i < list.length; i++) {
  list[i]._index = i;

  list[i].addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    moveX = 0;
  });

  list[i].addEventListener('touchmove', function(event) {
    moveX = event.touches[0].clientX - startX;
    if (moveX > 0) {
      this.style.transform = 'translateX(' + moveX + 'px)';
    }
  });

  list[i].addEventListener('touchend', function(event) {
    if (moveX > delWidth / 2) {
      this.style.transform = 'translateX(' + delWidth + 'px)';
      this.querySelector('.item-delete').addEventListener('click', function(event) {
        var index = event.currentTarget.parentNode.parentNode._index;
        console.log('delete item: ' + index);
        // TODO 实现删除操作
      });
    } else {
      this.style.transform = 'translateX(0px)';
    }
  });
}

In the above code, each list item is first monitored separately for touchstart, touchmove, and touchend events, and calculated based on the touch point and sliding distance. The amount of translation, use transform to achieve the sliding effect.

In the touchend event, if the sliding distance exceeds a certain threshold, the list item will be moved to the deleteWidth position, and a click event will be added to the delete button to implement the deletion operation.

At this point, the implementation of the sliding delete function is completed. You can use the above methods to easily implement the sliding delete effect in HTML and CSS, optimize the user experience of mobile applications and websites, and improve user satisfaction.

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