Heim > Artikel > Web-Frontend > So verwenden Sie jQuery, um die Drag-and-Drop-Funktion von div zu implementieren

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

PHPzOriginal: 2023-04-17 14:17:222400Durchsuche

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>

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

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

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

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

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Lassen Sie uns über einige häufig verwendete integrierte Anweisungen in Vue sprechenNächster Artikel：Lassen Sie uns über einige häufig verwendete integrierte Anweisungen in Vue sprechen

In Verbindung stehende Artikel

Mehr sehen