Maison > Article > interface Web > 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 :
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
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 classeclearfix
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 transform
correspondant à 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!