JavaScript Drag-and-Drop
In diesem Tutorial erkunden wir die Drag-and-Drop-Funktionalität in JavaScript, eine leistungsstarke Funktion, die die Interaktivität von Webseiten verbessert. Wir beginnen mit den grundlegenden Konzepten und Algorithmen, die Drag-and-Drop möglich machen, und gehen dann zu einem praktischen Beispiel über, in dem Sie diese Ideen in Aktion sehen können. Dieses Beispiel umfasst ein helles Symbol, das Sie in einen dunklen Bereich ziehen können, um ihn zu beleuchten.
Was ist Drag-and-Drop?
Drag-and-Drop ist eine Interaktion der Benutzeroberfläche, mit der Benutzer ein Objekt greifen und an eine andere Stelle auf dem Bildschirm verschieben können. Diese Interaktion ist häufig bei der Dateiverwaltung auf Ihrem Computer, beim Anordnen von Elementen in Spielen oder bei Online-Bearbeitungstools.
Grundkonzepte von Drag-and-Drop in JavaScript
Der Drag'n'Drop-Algorithmus
- Den Drag starten:
- Der Prozess beginnt, wenn der Benutzer auf das Element klickt und die Maustaste gedrückt hält.
- Das Element ziehen:
- Während sich die Maus bewegt, folgt das Element der Spur des Cursors über den Bildschirm.
- Das Element ablegen:
- Das Element wird losgelassen, wenn der Benutzer die Maustaste loslässt, und an einer neuen Position platziert.
Droppables verstehen
Droppables sind Bereiche, die dafür vorgesehen sind, die ziehbaren Elemente aufzunehmen. Diese Bereiche erkennen, wenn sich ein ziehbares Objekt über ihnen befindet, und können als Reaktion bestimmte Aktionen auslösen.
INFO
Stellen Sie sicher, dass Ihre Drag-and-Drop-Funktion touch-freundlich ist. Mobile Nutzer sollten Elemente per Touch-Gesten ziehen und ablegen können. Erwägen Sie die Implementierung von Touch-Events (touchstart, touchmove, touchend) oder die Verwendung einer leichtgewichtigen Bibliothek für geräteübergreifende Kompatibilität.
Interaktives Beispiel: Heller und dunkler Bereich
Lassen Sie uns die Theorie mit einem einfachen, aber interaktiven Beispiel in die Praxis umsetzen. Wir verwenden ein Glühbirnen-Symbol als ziehbares Objekt. Wenn dieses Symbol über einen dunklen Bereich bewegt wird, leuchtet der Bereich auf und simuliert so den Effekt, dass ein Licht eingeschaltet wird.
HTML und CSS einrichten
Zuerst definieren wir die grundlegende Struktur und das Styling. Wir fügen eine dunkle Box und ein Glühbirnen-Symbol ein.
HTML-Struktur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Interactive Lighting with Drag and Drop</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<style>
#darkArea {
width: 300px;
height: 300px;
background-color: #333;
position: relative;
margin-top: 20px;
}
#lightIcon {
font-size: 48px;
color: #ccc;
cursor: pointer;
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<div id="darkArea"></div>
<i id="lightIcon" class="fas fa-lightbulb"></i>
</div>
<script>
// JavaScript will be added here.
</script>
</body>
</html>JavaScript implementieren
Jetzt fügen wir die Funktionalität hinzu, damit die Glühbirne ziehbar und auf den dunklen Bereich reagierend wird.
Erklärung des JavaScript-Codes
<script>
// Get references to the light bulb icon and the dark area on the webpage
var lightIcon = document.getElementById("lightIcon");
var darkArea = document.getElementById("darkArea");
// Variables to track whether the dragging is active and to store position data
var active = false;
var initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0;
// Listen for the mouse down event on the light bulb icon
lightIcon.addEventListener("mousedown", function(e) {
// Record the starting position of the mouse and adjust by any existing offset
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
// Set the active flag to true, indicating that dragging has started
active = true;
});
// Listen for mouse movement across the entire document
document.addEventListener("mousemove", function(e) {
// If not dragging, don't do anything
if (!active) return;
// Calculate the new position of the mouse
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
// Update the offset with the new position
xOffset = currentX;
yOffset = currentY;
// Move the light bulb icon to the new position
lightIcon.style.transform = "translate3d(" + currentX + "px, " + currentY + "px, 0)";
});
// Listen for the mouse up event across the entire document
document.addEventListener("mouseup", function() {
// Save the final position of the light bulb
initialX = currentX;
initialY = currentY;
// Set the active flag to false, indicating dragging has ended
active = false;
// Check if the light bulb is inside the dark area
if (isInside(darkArea, lightIcon)) {
// Change the background color of the dark area to yellow
darkArea.style.backgroundColor = "yellow";
// Change the color of the light bulb to yellow
lightIcon.style.color = "yellow";
} else {
// Revert the dark area's color to dark
darkArea.style.backgroundColor = "#333";
// Revert the light bulb's color to gray
lightIcon.style.color = "#ccc";
}
});
// Function to check if the light bulb is inside the dark area
function isInside(container, element) {
// Get the position of the container and the element
var containerRect = container.getBoundingClientRect();
var elementRect = element.getBoundingClientRect();
// Return true if the element is within the container's boundaries
return (
elementRect.left >= containerRect.left &&
elementRect.right <= containerRect.right &&
elementRect.top >= containerRect.top &&
elementRect.bottom <= containerRect.bottom
);
}
</script>Dieses Skript macht ein Glühbirnen-Symbol auf Ihrem Bildschirm mit der Maus beweglich. Sie können auf die Glühbirne klicken, sie ziehen und sehen, wie sie mit einem dunklen Bereich auf dem Bildschirm interagiert. Hier ist in einfachen Worten, was jeder Teil des Skripts tut:
Alles vorbereiten: Zuerst identifiziert das Skript das Glühbirnen-Symbol und den dunklen Bereich auf Ihrer Webseite. Außerdem richtet es einige Regeln ein, um die Bewegung der Maus zu verfolgen.
Mit dem Ziehen beginnen:
- Wenn Sie mit der Maus auf die Glühbirne drücken, merkt sich das Skript, wo Sie begonnen haben. So kann es später erkennen, wie weit Sie die Glühbirne bewegen.
Die Glühbirne bewegen:
- Während Sie die Maustaste gedrückt halten und die Maus bewegen, lässt das Skript die Glühbirne Ihrer Maus folgen. Es tut dies, indem es die Position der Glühbirne ständig an die Position Ihrer Maus anpasst.
Die Glühbirne ablegen:
- Wenn Sie die Maustaste loslassen, prüft das Skript, ob sich die Glühbirne über dem dunklen Bereich befindet. Wenn ja, leuchtet der dunkle Bereich auf und wird gelb, und auch die Glühbirne ändert ihre Farbe, um anzuzeigen, dass sie eingeschaltet ist. Wenn sie sich nicht über dem dunklen Bereich befindet, kehrt alles zum Normalzustand zurück.
Die Position prüfen:
- Es gibt einen speziellen Satz von Regeln (eine Funktion namens
isInside), der dem Skript hilft zu erkennen, ob sich die Glühbirne über dem dunklen Bereich befindet oder nicht. Dabei wird die Position der Glühbirne mit den Grenzen des dunklen Bereichs verglichen.
- Es gibt einen speziellen Satz von Regeln (eine Funktion namens
INFO
Verwenden Sie translate3d in Ihren CSS-Transformationen zum Ziehen von Elementen. Es nutzt GPU-Beschleunigung, was zu flüssigeren Bewegungen und geringerer CPU-Last führt und für leistungsintensive Anwendungen entscheidend ist.
Vollständiges Beispiel
Jetzt ist es an der Zeit, alles in Aktion zu sehen, also:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Interactive Lighting with Drag and Drop</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<style>
#darkArea {
width: 300px;
height: 300px;
background-color: #333;
position: relative;
margin-top: 20px;
}
#lightIcon {
font-size: 48px;
color: #ccc;
cursor: pointer;
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<p>Move the light into the dark area to light it up!</p>
<div id="darkArea"></div>
<i id="lightIcon" class="fas fa-lightbulb"></i>
</div>
<script>
// Get references to the light bulb icon and the dark area on the webpage
var lightIcon = document.getElementById("lightIcon");
var darkArea = document.getElementById("darkArea");
// Variables to track whether the dragging is active and to store position data
var active = false;
var initialX,
initialY,
currentX,
currentY,
xOffset = 0,
yOffset = 0;
// Listen for the mouse down event on the light bulb icon
lightIcon.addEventListener("mousedown", function (e) {
// Record the starting position of the mouse and adjust by any existing offset
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
// Set the active flag to true, indicating that dragging has started
active = true;
});
// Listen for mouse movement across the entire document
document.addEventListener("mousemove", function (e) {
// If not dragging, don't do anything
if (!active) return;
// Calculate the new position of the mouse
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
// Update the offset with the new position
xOffset = currentX;
yOffset = currentY;
// Move the light bulb icon to the new position
lightIcon.style.transform = "translate3d(" + currentX + "px, " + currentY + "px, 0)";
});
// Listen for the mouse up event across the entire document
document.addEventListener("mouseup", function () {
// Save the final position of the light bulb
initialX = currentX;
initialY = currentY;
// Set the active flag to false, indicating dragging has ended
active = false;
// Check if the light bulb is inside the dark area
if (isInside(darkArea, lightIcon)) {
// Change the background color of the dark area to yellow
darkArea.style.backgroundColor = "yellow";
lightIcon.style.color = "yellow";
} else {
// Revert the dark area's color to dark
darkArea.style.backgroundColor = "#333";
// Revert the light bulb's color to gray
lightIcon.style.color = "#ccc";
}
});
// Function to check if the light bulb is inside the dark area
function isInside(container, element) {
// Get the position of the container and the element
var containerRect = container.getBoundingClientRect();
var elementRect = element.getBoundingClientRect();
// Return true if the element is within the container's boundaries
return elementRect.left >= containerRect.left && elementRect.right <= containerRect.right && elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
}
</script>
</body>
</html>Verwendete wichtige Mausereignisse:
mousedown: Dieses Ereignis wird ausgelöst, wenn der Benutzer die Maustaste über dem Glühbirnen-Symbol drückt. Es markiert den Beginn des Ziehens und speichert die Anfangsposition des Cursors.mousemove: Dieses Ereignis wird ausgelöst, wenn die Maus bewegt wird. Wenn das Ziehen aktiv ist (d. h. die Maustaste noch gedrückt wird), berechnet es die neue Position des Symbols basierend auf der Bewegung des Cursors und aktualisiert die Position der Glühbirne auf dem Bildschirm.mouseup: Dieses Ereignis tritt auf, wenn der Benutzer die Maustaste loslässt und markiert das Ende des Ziehens. Es prüft, ob sich die Glühbirne innerhalb der Grenzen des dunklen Bereichs befindet, um zu entscheiden, ob die Hintergrundfarbe des Bereichs geändert werden soll.
Wie wir im Artikel Mouse Events gelernt haben, sind diese Ereignisse grundlegend für die Erstellung interaktiver Drag-and-Drop-Funktionalität und ermöglichen es, Elemente auf einer Webseite dynamisch zu verschieben und mit ihnen per Maus zu interagieren.
Fazit
Drag-and-Drop-Aktionen können Ihre Websites benutzerfreundlicher machen und besser aussehen lassen. Wenn Sie die einfachen Ideen lernen und sie mit echten Beispielen ausprobieren, können Sie diese spannenden Funktionen gut einsetzen. Dadurch werden Ihre Websites unterhaltsamer und interaktiver.
Übung
Welche Aussagen über die Drag-and-Drop-Funktionalität in JavaScript sind wahr?