Maison > Article > interface Web > jquery implémente le glisser-déposer
jquery implémente le glisser-déposer
- PHPzoriginal
- 2023-05-25 10:07:071330parcourir
Avec la popularité des pages Web modernes, les éléments déplaçables qui interagissent avec les utilisateurs sont devenus un élément indispensable de la conception. JQuery est une bibliothèque JavaScript très populaire qui simplifie de nombreuses opérations courantes en développement. L'une des fonctionnalités est la mise en œuvre d'éléments déplaçables. Dans cet article, nous apprendrons comment implémenter des éléments déplaçables à l'aide de JQuery.
1. Créer du HTML et du CSS
Avant de commencer à écrire du code JQuery, nous avons besoin d'une page HTML pour implémenter les éléments déplaçables. Nous allons créer une mise en page HTML simple avec des éléments déplaçables et quelques styles CSS de base. Voici notre code HTML et CSS :
<!DOCTYPE html>
<html>
<head>
<title>可拖拽实例</title>
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div class="draggable">可拖拽元素</div>
</body>
</html>Dans notre code, nous avons créé une simple page HTML qui contient un élément déplaçable. Notre style CSS définit le style de nos éléments déplaçables, notamment la largeur, la hauteur, la couleur, la position, etc.
2. Présentez la bibliothèque JQuery
Ensuite, nous devons présenter la bibliothèque JQuery. Vous pouvez télécharger les derniers fichiers de bibliothèque sur le site officiel de JQuery et les insérer dans votre propre projet. Vous pouvez également utiliser le lien CDN de JQuery. Ajoutez le code suivant à notre code :
<!DOCTYPE html>
<html>
<head>
<title>可拖拽实例</title>
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="draggable">可拖拽元素</div>
</body>
</html>Dans notre code, nous avons ajouté un lien CDN pour JQuery que nous pouvons utiliser pour notre exemple.
3. Écrivez du code JQuery
Maintenant, nous allons commencer à écrire du code JQuery pour implémenter la fonction des éléments déplaçables. Le cœur de JQuery est constitué de sélecteurs et d’événements. Dans notre exemple, nous utiliserons l'événement .mousemove() et la méthode .css().
<!DOCTYPE html>
<html>
<head>
<title>可拖拽实例</title>
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
var x = 0;
var y = 0;
var dragging = false;
var element;
$(".draggable").mousedown(function(e) {
element = $(this);
x = e.pageX - element.offset().left;
y = e.pageY - element.offset().top;
dragging = true;
});
$(document).mouseup(function() {
dragging = false;
});
$(document).mousemove(function(e) {
if (dragging) {
element.css({
top: e.pageY - y,
left: e.pageX - x
});
}
});
});
</script>
</head>
<body>
<div class="draggable">可拖拽元素</div>
</body>
</html>Dans notre code, nous utilisons $(document).ready() pour indiquer que la page est chargée et que le code JQuery peut être exécuté.
Nous définissons d'abord quatre variables : x et y stockent la distance entre le pointeur de la souris et le coin supérieur gauche de l'élément, le glisser est utilisé pour détecter si l'élément est déplacé et l'élément est utilisé pour stocker l'élément déplacé.
Nous utilisons $(".draggable").mousedown() pour lier l'événement mousedown à notre élément. Lorsque l'utilisateur clique sur un élément et appuie sur la souris, la distance entre le pointeur de la souris et l'élément est enregistrée et la variable de déplacement est définie sur true.
Nous utilisons $(document).mouseup() pour lier l'événement mouseup afin de détecter le moment où l'utilisateur relâche le bouton de la souris. Dans ce cas, la variable de déplacement est définie sur false.
Enfin, nous utilisons $(document).mousemove() pour lier l'événement mousemove afin de détecter le mouvement de la souris. Si l'élément est déplacé (glisser = true), la méthode .css() sera utilisée pour définir les valeurs supérieure et gauche de l'élément afin de déplacer l'élément sous le pointeur de la souris.
4. Effet de test
Maintenant, nous pouvons exécuter notre code dans le navigateur. Si tout fonctionne correctement, nous devrions pouvoir cliquer et faire glisser notre élément déplaçable.
Pendant les tests, vous devrez peut-être ajuster certaines valeurs dans votre code pour que vos éléments déplaçables fonctionnent mieux. Vous pourrez peut-être également ajouter des styles et des attributs supplémentaires pour personnaliser votre élément en fonction des besoins de votre projet.
Résumé :
Dans cet article, nous avons appris comment implémenter des éléments déplaçables à l'aide de JQuery. Nous avons écrit du code HTML et CSS simple et ajouté la bibliothèque JQuery. Nous utilisons les événements .mousedown(), .mouseup() et .mousemove() et la méthode .css() pour implémenter la fonction glisser-déposer.
Lorsque vous utilisez JQuery pour implémenter des éléments déplaçables dans vos propres projets, vous pouvez utiliser l'exemple de code fourni dans cet article comme point de départ et le personnaliser en fonction de vos besoins. Gardez toujours à l’esprit la lisibilité, la maintenabilité et la facilité d’utilisation.
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!