jquery glisser horizontal pour supprimer

Avec le développement continu de la technologie Internet, la demande d'interactivité des pages de sites Web est de plus en plus élevée. Le glissement et la suppression horizontaux sont l'un des scénarios d'interaction les plus courants. Lors de l'implémentation de cette fonction, jQuery est un outil très utile qui peut nous aider à implémenter rapidement cette fonction. Cet article présentera en détail comment utiliser jQuery pour implémenter la fonction de glisser-supprimer horizontal.

1. Exigences fonctionnelles

Avant l'implémentation spécifique, jetons un coup d'œil aux exigences fonctionnelles :

1. Lorsque la souris clique sur un élément, l'élément devient déplaçable.
2. Lorsque la souris est déplacée horizontalement, l'élément se déplace avec la souris.
3. Lorsque la distance entre l'élément et le bord droit de la page atteint une certaine valeur, l'élément disparaît automatiquement.
4. Pendant le processus de glissement, vous pouvez supprimer l'élément en relâchant la souris ou en faisant glisser l'élément vers la zone spécifiée.

2. Étapes de mise en œuvre

Une fois les exigences fonctionnelles en place, la mise en œuvre spécifique peut commencer. Les étapes spécifiques sont les suivantes :

1. Présentez la bibliothèque jQuery

Avant d'implémenter cette fonction, vous devez d'abord introduire la bibliothèque jQuery dans la page HTML. Dans cet article, nous présenterons le lien CDN de jQuery, le code est le suivant :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Ajouter des éléments HTML

Ajoutez des éléments qui doivent être glissés et supprimés dans la page HTML, le code est le suivant :

<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>
<div class="item">元素4</div>
<div class="item">元素5</div>

Parmi eux, .item est le nom de classe que nous avons ajouté à chaque élément, qui sera utilisé plus tard. .item是我们为每个元素添加的类名，后面将会用到。

3.添加CSS样式

为每个元素设置相应的样式，代码如下：

.item {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    float: left;
    cursor: move;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

其中，设置了元素的宽度、高度、背景颜色、圆角、文本居中、右边距、浮动和鼠标样式等相关属性，并添加了一个clearfix类，用于清除浮动。

4.添加JS交互代码

添加相应的JS代码，实现拖动删除功能，代码如下：

$(function () {
    var startX = 0;
    var endX = 0;
    var offsetX = 0;
    var isMoved = false;
 
    // 当鼠标按下时
    $('.item').on('mousedown', function (e) {
        startX = e.clientX;
        $(this).css('cursor', 'grabbing');
        isMoved = false;
    });
 
    // 当鼠标移动时
    $(document).on('mousemove', function (e) {
        if (startX === 0) {
            return;
        }
        endX = e.clientX;
        offsetX = endX - startX;
        $('.item').css('transform', 'translateX(' + offsetX + 'px)');
        if (Math.abs(offsetX) > 10) {
            isMoved = true;
        }
    });
 
    // 当鼠标抬起时
    $(document).on('mouseup', function () {
        $('.item').css('transform', 'translateX(0px)');
        $('.item').css('cursor', 'move');
 
        if (isMoved) {
            if (offsetX > 100) {
                $(this).remove();
            }
        }
        startX = 0;
        endX = 0;
        offsetX = 0;
        isMoved = false;
    });
});

以上代码实现了当鼠标按下时，将元素添加相应的transform属性，使元素跟随鼠标移动，并在拖动过程中判断是否需要删除该元素。

三、注意事项

在实现横向拖动删除功能时，需要注意以下几点：

1.为每个元素添加相应的cursor属性，使鼠标在元素上时能够显示相应的鼠标样式。

2.在使用transform

3. Ajouter des styles CSS

Définissez le style correspondant pour chaque élément. Le code est le suivant :

rrreee

Parmi eux, la largeur, la hauteur, la couleur de fond, les coins arrondis, le centrage du texte, la marge droite, le style flottant et la souris. de l'élément sont définis et d'autres attributs associés, et a ajouté une classe clearfix pour effacer les flottants.

4. Ajouter le code d'interaction JS 🎜🎜Ajoutez le code JS correspondant pour implémenter la fonction glisser-supprimer. Le code est le suivant : 🎜rrreee🎜Le code ci-dessus ajoute le transformcorrespondant à l'élément lorsque le code est ajouté. la souris est enfoncée. >Attribut pour que l'élément suive le mouvement de la souris et détermine si l'élément doit être supprimé pendant le processus de glissement. 🎜🎜3. Notes🎜🎜Lors de l'implémentation de la fonction glisser-supprimer horizontal, vous devez faire attention aux points suivants : 🎜🎜1. Ajoutez l'attribut curseur correspondant à chaque élément afin que lorsque la souris est sur l'élément Possibilité d'afficher les styles de souris correspondants. 🎜🎜2. Lorsque vous utilisez l'attribut transform, vous devez utiliser un noyau de navigateur spécifique pour être compatible avec les différents navigateurs. 🎜🎜3. Les événements de mouvement de la souris doivent être anti-secoués pour éviter les redessins fréquents qui provoquent le blocage du navigateur. 🎜🎜4. Résumé🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de glisser-supprimer horizontal à l'aide de jQuery. Dans le développement réel, vous pouvez également ajouter des effets d'animation pour améliorer l'expérience d'interaction utilisateur. J'espère que cet article vous sera utile et j'espère également que vous pourrez utiliser de manière flexible jQuery et ses technologies associées dans le développement réel futur pour obtenir des effets interactifs plus riches. 🎜

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!