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