Maison >interface Web >Questions et réponses frontales >Comment utiliser jQuery pour implémenter la fonction glisser-déposer de div

Comment utiliser jQuery pour implémenter la fonction glisser-déposer de div

PHPzoriginal: 2023-04-17 14:17:222501parcourir

1. Introduction

Dans le développement front-end, la fonction glisser-déposer est une méthode d'interaction très courante, et la méthode d'implémentation est relativement simple, souvent implémentée via des frameworks front-end tels que jQuery. Cet article présentera en détail comment utiliser jQuery pour implémenter la fonction glisser-déposer des divs.

2. Étapes de mise en œuvre

Structure HTML

Tout d'abord, vous devez établir une structure correspondante en HTML, c'est-à-dire que vous devez implémenter l'élément div glissé. En général, il est recommandé d'utiliser le positionnement absolu. pour le positionner dans une zone plus petite.

<div class="box">
    <div class="drag"></div>
</div>

Style CSS

Deuxièmement, utilisez CSS pour définir le style de l'élément déplacé, comme la définition de la largeur, de la hauteur, de la couleur d'arrière-plan, de la bordure et d'autres attributs du div.

.box {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #f2f2f2;
    border: 1px solid #dcdcdc;
}

.drag {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #29b6f6;
    border-radius: 50%;
}

Code JS

Enfin, implémentez la fonction glisser via jQuery ou du code JS natif. Les étapes de mise en œuvre spécifiques sont les suivantes :

(1) Liez l'événement souris vers le bas, l'événement déplacement et l'événement souris vers le haut à l'élément glisser.

$('.drag').mousedown(function(e){
    // 鼠标按下时的事件
}).mousemove(function(e){
    // 鼠标移动时的事件
}).mouseup(function(e){
    // 鼠标抬起时的事件
});

(2) Dans l'événement souris enfoncée, enregistrez la position de l'élément actuellement déplacé et la position de la souris.

var box = $(".box");
var drag = $(".drag");

// 拖动元素的位置
var dragX = drag.offset().left - box.offset().left;
var dragY = drag.offset().top - box.offset().top;

// 鼠标的位置
var mouseX = e.pageX;
var mouseY = e.pageY;

(3) Dans l'événement de mouvement de la souris, calculez la distance dont l'élément déplacé doit se déplacer et réalisez le déplacement de l'élément en modifiant les valeurs gauche et supérieure de l'élément déplacé.

var moveX = e.pageX - mouseX;
var moveY = e.pageY - mouseY;

drag.css({
    left: dragX + moveX + "px",
    top: dragY + moveY + "px"
});

(4) Dans l'événement mouse-up, effacez la position enregistrée de la souris et la position de l'élément déplacé.

mouseX = 0;
mouseY = 0;
dragX = 0;
dragY = 0;

3. Code complet

<!DOCTYPE html>
<html>
<head>
    <title>jQuery拖动实例</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #f2f2f2;
            border: 1px solid #dcdcdc;
        }

        .drag {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #29b6f6;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="drag"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        var box = $(".box");
        var drag = $(".drag");
        var dragX = 0;
        var dragY = 0;
        var mouseX = 0;
        var mouseY = 0;

        drag.mousedown(function(e){
            dragX = drag.offset().left - box.offset().left;
            dragY = drag.offset().top - box.offset().top;
            mouseX = e.pageX;
            mouseY = e.pageY;
        }).mousemove(function(e){
            if(mouseX === 0 || mouseY === 0 || dragX === 0 || dragY === 0) {
                return;
            }
            
            var moveX = e.pageX - mouseX;
            var moveY = e.pageY - mouseY;

            drag.css({
                left: dragX + moveX + "px",
                top: dragY + moveY + "px"
            });
        }).mouseup(function(e){
            mouseX = 0;
            mouseY = 0;
            dragX = 0;
            dragY = 0;
        });
    </script>
</body>
</html>

4. Résumé

Cet article présente principalement comment utiliser jQuery pour réaliser la fonction de glissement des éléments div Grâce à la coopération de HTML, CSS et JS, cet effet interactif est obtenu facilement et de manière compréhensible. . J'espère que cela sera utile aux développeurs front-end.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Parlons de quelques instructions intégrées couramment utilisées dans vueArticle suivant：Parlons de quelques instructions intégrées couramment utilisées dans vue

Articles Liés

Voir plus