jquery diapositive gauche pour supprimer

Dans le développement d'applications Web modernes, la conception d'interactions est souvent un élément crucial. L’un des déterminants d’une bonne expérience utilisateur est la forme d’interaction appropriée.

Parmi eux, Swipe-to-Delete est largement utilisé pour supprimer des éléments tels que des éléments de liste ou des cartes. Par exemple, supprimer un email dans l'application de messagerie, ou supprimer une mise à jour dans l'application de réseau social, etc.

Dans le développement Web traditionnel, la mise en œuvre de la suppression par balayage vers la gauche nécessite généralement beaucoup de traitement manuel des opérations DOM et de contrôle de style. Mais désormais, les bibliothèques d'événements et d'animations fournies par jQuery ont considérablement simplifié et enrichi la manière d'implémenter le balayage vers la gauche pour supprimer.

Ensuite, nous utiliserons jQuery pour implémenter un simple balayage vers la gauche pour supprimer l'effet.

1. Implémenter l'interaction de base

Tout d'abord, dans la page HTML, nous devons définir un élément conteneur contenant les éléments de la liste et ajouter un élément bloc contenant le bouton de suppression à l'intérieur. L'icône de suppression fournie par la bibliothèque d'icônes de police FontAwesome est utilisée ici, et certains styles de base doivent être ajoutés au bouton de suppression :

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete"> <i class="fa fa-trash"></i> </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

Le code ci-dessus définit un conteneur d'éléments de liste d'une hauteur de 50 pixels, qui contient un élément span (utilisé pour afficher le contenu de l'élément de liste) et un élément de bouton de suppression. L’attribut overflow:hidden de l’élément conteneur est défini pour masquer l’élément bouton de suppression. L'élément du bouton de suppression est défini avec un positionnement absolu et un décalage négatif sur le côté droit pour obtenir l'effet d'animation lors du glissement vers la gauche pour supprimer.

Ensuite, ajoutez la surveillance des événements tactiles de la souris jQuery pour l'élément du bouton de suppression afin de gérer la logique de suppression par balayage vers la gauche. En raison de la mise en œuvre de la suppression par balayage vers la gauche, essentiellement la distance de mouvement de la souris entraîne le changement de la position du bouton de suppression, de sorte que l'événement de mouvement de la souris doit être surveillé.

$(document).on("mousemove swipeleft",".list-item",function(e){
    var $delete = $(this).find('.delete');
    var left = e.pageX - $(this).offset().left;   
    if (left > $(this).width()/2) {
        $delete.css('right', 0);
    } else {
        $delete.css('right', '-50px');
    }
});

Dans le code ci-dessus, nous utilisons la méthode on() de jQuery pour écouter les mouvements de la souris et les événements tactiles (événement de diapositive gauche). Obtenez ensuite la distance de la souris par rapport au côté gauche de l'élément et déterminez la position du bouton de suppression en fonction de la moitié de la largeur de l'élément : si la distance de mouvement de la souris dépasse la moitié de la largeur de l'élément, l'animation de décalage à droite de l'élément du bouton de suppression passe à 0, sinon la droite L'animation de décalage passe à -50px pour faire glisser le bouton de suppression dans l'élément.

2. Ajouter une opération de suppression

Après avoir traité l'interaction du balayage gauche pour supprimer, vous devez également réfléchir à la manière de mettre en œuvre la logique de l'opération de suppression. Un moyen simple d'y parvenir consiste à utiliser la méthode remove() de jQuery pour supprimer des éléments. L'implémentation ici consiste à ajouter un écouteur d'événement de clic après le déclenchement de la diapositive droite à supprimer, dans laquelle l'élément est supprimé de l'arborescence DOM en appelant la méthode remove().

$(document).on("click",".delete",function(e){
    e.stopPropagation();
    $(this).parent().remove();
});

Dans le code ci-dessus, nous utilisons la méthode stopPropagation() de jQuery pour empêcher les événements de clic de remonter jusqu'à l'élément parent et d'affecter la surveillance des suppressions par balayage gauche.

3. Code complet

Enfin, en rassemblant les deux parties de code ci-dessus, nous pouvons obtenir un code d'implémentation complet de suppression de diapositive gauche jQuery.

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete">
        <i class="fa fa-trash"></i>
    </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on("mousemove swipeleft",".list-item",function(e){
        var $delete = $(this).find('.delete');
        var left = e.pageX - $(this).offset().left;   
        if (left > $(this).width()/2) {
            $delete.css('right', 0);
        } else {
            $delete.css('right', '-50px');
        }
    });

    $(document).on("click",".delete",function(e){
        e.stopPropagation();
        $(this).parent().remove();
    });
</script>

Ce code n'est qu'un exemple simple de suppression par balayage gauche de jQuery. Il n'inclut pas le traitement complet des détails et l'optimisation de l'adéquation. Les lecteurs peuvent apporter les modifications et extensions appropriées en fonction de leurs propres besoins.

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!