手机滑动删除js touch

<ul class="list">
  <li class="list-item">
    <div class="content">Item 1</div>
    <div class="delete">Delete</div>
  </li>
  <li class="list-item">
    <div class="content">Item 2</div>
    <div class="delete">Delete</div>
  </li>
</ul>

.list {
  list-style: none;
  padding: 0;
}

.list-item {
  position: relative;
  overflow: hidden;
}

.content {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 15px;
}

.delete {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background-color: #ff4d4f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

document.querySelectorAll('.list-item').forEach(item => {
  let startX = 0;
  let currentX = 0;

  item.addEventListener('touchstart', e => {
    startX = e.touches[0].clientX;
  });

  item.addEventListener('touchmove', e => {
    currentX = e.touches[0].clientX;
  });

  item.addEventListener('touchend', () => {
    const deltaX = currentX - startX;
    if (deltaX > 50) {
      item.querySelector('.delete').style.transform = 'translateX(0)';
    } else {
      item.querySelector('.delete').style.transform = 'translateX(100%)';
    }
  });
});