Comment utiliser HTML, CSS et jQuery pour implémenter la fonction avancée de glissement pour supprimer des éléments de liste

Comment utiliser HTML, CSS et jQuery pour implémenter la fonction avancée de glisser pour supprimer des éléments de liste

Dans le développement Web moderne, glisser pour supprimer est une fonction d'interaction utilisateur courante qui permet aux utilisateurs de supprimer des éléments de liste via des gestes coulissants. Cet article explique comment utiliser HTML, CSS et jQuery pour implémenter cette fonctionnalité avancée et fournit des exemples de code spécifiques.

1. Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML de base pour afficher les éléments de la liste. Ceci peut être réalisé en utilisant des listes non ordonnées (

) et des éléments de liste (
• ).

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

  Copier après la connexion
  2. Ajouter des styles CSS

  Afin d'obtenir l'effet de suppression coulissante, nous devons utiliser CSS pour styliser les éléments de la liste et utiliser certains effets d'animation CSS pour obtenir l'effet coulissant.

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

  Copier après la connexion

  Dans le code CSS ci-dessus, nous définissons le style de base des éléments de la liste et définissons également certains noms de classes liés aux effets d'animation, tels que .slideout, .sliding et .delete. Parallèlement, nous définissons également le style d'un bouton "Supprimer". .slideout、.sliding和.delete。同时，我们还定义了一个“删除”按钮的样式。

  3. 使用jQuery实现滑动删除效果

  接下来，我们需要使用jQuery来实现滑动删除的效果。我们可以通过在li元素上绑定事件来实现。

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

  Copier après la connexion

  在上述jQuery代码中，我们绑定了以下事件：

  • touchstart：当触摸开始时记录起始位置；
  • touchmove：在滑动过程中更新位置，并根据滑动距离判断是否进行滑动删除的动画；
  • touchend：当触摸结束时根据滑动距离判断是否进行滑动删除的动画；
  • click
  Utilisez jQuery pour obtenir l'effet de suppression coulissante
  Ensuite, nous devons utiliser jQuery pour obtenir l'effet de suppression coulissante. Nous pouvons le faire en liant des événements sur l'élément li.

  rrreee

  Dans le code jQuery ci-dessus, nous avons lié les événements suivants : 🎜
  🎜touchstart : enregistrez la position de départ lorsque le toucher démarre ; 🎜🎜touchmove : Mettez à jour la position pendant le processus de glissement et déterminez s'il faut effectuer une animation de suppression glissante en fonction de la distance de glissement ; 🎜🎜touchend : lorsque le toucher se termine, déterminez s'il faut effectuer une animation de suppression glissante en fonction de la distance de glissement ; ; 🎜🎜 clic : Effectue une animation de suppression lorsque le bouton "Supprimer" est cliqué. 🎜🎜🎜À ce stade, nous avons terminé la fonction avancée de glissement pour supprimer des éléments de liste à l'aide de HTML, CSS et jQuery. Les utilisateurs peuvent supprimer un ou plusieurs éléments de liste via des gestes coulissants pour gérer les données plus facilement. En utilisant de manière flexible HTML, CSS et jQuery, nous pouvons obtenir divers effets et fonctions d'interaction utilisateur uniques et améliorer l'expérience utilisateur des applications Web. 🎜🎜Remarque : le code ci-dessus n'est qu'un exemple et doit être modifié et optimisé en fonction des besoins spécifiques d'une utilisation réelle. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!