So verwenden Sie jQuery, um die Drag-and-Drop-Funktion von div zu implementieren-Front-End-Fragen und Antworten-php.cn

So verwenden Sie jQuery, um die Drag-and-Drop-Funktion von div zu implementieren

PHPz

Freigeben： 2023-04-17 14:27:03

Original

2469 Leute haben es durchsucht

1. Einführung

In der Front-End-Entwicklung ist die Drag-and-Drop-Funktion eine sehr häufige Interaktionsmethode, und die Implementierungsmethode ist relativ einfach und wird häufig über Front-End-Frameworks wie jQuery implementiert. In diesem Artikel wird ausführlich beschrieben, wie Sie mit jQuery die Drag-and-Drop-Funktion von Divs implementieren.

2. Implementierungsschritte

HTML-Struktur

Zunächst müssen Sie eine entsprechende Struktur in HTML einrichten, das heißt, Sie müssen das gezogene div-Element implementieren Positionieren Sie es in einem kleineren Bereich.

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

Nach dem Login kopieren

CSS-Stil

Zweitens verwenden Sie CSS, um den Stil des gezogenen Elements festzulegen, z. B. die Breite, Höhe, Hintergrundfarbe, den Rahmen und andere Attribute des 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%;
}

Nach dem Login kopieren

JS-Code

Zuletzt implementieren Sie die Ziehfunktion über jQuery oder nativen JS-Code. Die spezifischen Implementierungsschritte lauten wie folgt:

(1) Binden Sie das Maus-nach-unten-Ereignis, das Bewegungsereignis und das Maus-nach-oben-Ereignis an das Drag-Element.

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

Nach dem Login kopieren

(2) Speichern Sie im Mausklick-Ereignis die Position des aktuell gezogenen Elements und die Position der Maus.

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;

Nach dem Login kopieren

(3) Berechnen Sie im Mausbewegungsereignis die Entfernung, die das gezogene Element zum Bewegen benötigt, und realisieren Sie das Ziehen des Elements, indem Sie die linken und oberen Werte des gezogenen Elements ändern.

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

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

Nach dem Login kopieren

(4) Löschen Sie beim Mouse-Up-Ereignis die gespeicherte Mausposition und die Position des gezogenen Elements.

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

Nach dem Login kopieren

3. Vollständiger Code

<!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>

Nach dem Login kopieren

4. Zusammenfassung

In diesem Artikel wird hauptsächlich die Verwendung von jQuery zum Realisieren der Ziehfunktion von div-Elementen vorgestellt. Durch die Zusammenarbeit von HTML, CSS und JS wird dieser interaktive Effekt einfach und verständlich erreicht . . Ich hoffe, dass es für Frontend-Entwickler hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um die Drag-and-Drop-Funktion von div zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!