Comment utiliser jQuery pour implémenter la fonction glisser-déposer de div-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-17 14:27:03

original

2472 Les gens l'ont consulté

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>

Copier après la connexion

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%;
}

Copier après la connexion

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){
    // 鼠标抬起时的事件
});

Copier après la connexion

(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;

Copier après la connexion

(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"
});

Copier après la connexion

(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;

Copier après la connexion

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>

Copier après la connexion

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!