Heim > Artikel > Web-Frontend > Erstellen eines ziehbaren Elements mit HTML, CSS und JavaScript

Erstellen eines ziehbaren Elements mit HTML, CSS und JavaScript

WBOYOriginal: 2024-08-06 15:14:501200Durchsuche

In der modernen Webentwicklung ist Interaktivität der Schlüssel zur Einbindung von Benutzern und zur Schaffung eines dynamischen Benutzererlebnisses. Eine Möglichkeit, Interaktivität hinzuzufügen, besteht darin, Elemente ziehbar zu machen. In diesem Beitrag erfahren Sie, wie Sie mit HTML, CSS und JavaScript ein ziehbares Element erstellen.

Ausgabe:

Creating a Draggable Element Using HTML, CSS, and JavaScript

HTML-Struktur
Beginnen wir mit der grundlegenden HTML-Struktur. Wir erstellen ein einfaches div-Element, das wir ziehbar machen möchten. Hier ist der Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Element</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="draggable" id="draggableElement">Drag me!</div>
<script src="script.js"></script>
</body>
</html>

In diesem Code haben wir ein Div mit der Klasse Draggable und der ID DraggableElement. Dies wird das Element sein, das wir ziehbar machen.

Das ziehbare Element mit CSS gestalten

.draggable {
    position: absolute;
    cursor: grab;
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    line-height: 100px;
    border-radius: 8px;
    user-select: none;
}

.draggable.dragging {
    cursor: grabbing;
}

In diesem CSS definieren wir die .draggable-Klasse, um unser Element zu formatieren. Wir setzen seine Position auf absolut, damit wir ihn frei auf der Seite verschieben können. Die Eigenschaft „cursor“ ist auf „grab“ eingestellt, um anzuzeigen, dass das Element ziehbar ist. Wir definieren außerdem Breite, Höhe, Hintergrundfarbe, Textfarbe, Textausrichtung und Zeilenhöhe, um den Text vertikal und horizontal zu zentrieren. Der Rahmenradius wird für abgerundete Ecken hinzugefügt und user-select: none wird verwendet, um die Textauswahl beim Ziehen zu verhindern. Lesen Sie mehr

Interaktivität mit JavaScript hinzufügen

let draggableElement = document.getElementById('draggableElement');
let offsetX, offsetY;

draggableElement.addEventListener('mousedown', startDragging);
draggableElement.addEventListener('mouseup', stopDragging);

function startDragging(e) {
    e.preventDefault();
    offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
    offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
    draggableElement.classList.add('dragging');
    document.addEventListener('mousemove', dragElement);
}

function dragElement(e) {
    e.preventDefault();
    let x = e.clientX - offsetX;
    let y = e.clientY - offsetY;
    draggableElement.style.left = x + 'px';
    draggableElement.style.top = y + 'px';
}

function stopDragging() {
    draggableElement.classList.remove('dragging');
    document.removeEventListener('mousemove', dragElement);
}

Dragging starten: Die Funktion „StartDragging“ wird ausgelöst, wenn der Benutzer die Maustaste auf das Element drückt. Diese Funktion:

Verhindert das Standardverhalten des Ereignisses mithilfe von e.preventDefault().
Berechnet die Versätze, indem die Position der oberen linken Ecke des Elements von der Mausposition subtrahiert wird.
Fügt die Ziehklasse hinzu, um den Cursor zu ändern.
Fügt dem Dokument einen Ereignis-Listener für das Mousemove-Ereignis hinzu, der die DragElement-Funktion auslöst.

Drag Element: Die DragElement-Funktion wird ausgelöst, wenn sich die Maus bewegt. Diese Funktion:

Verhindert das Standardverhalten des Ereignisses.
Berechnet die neue Position des Elements basierend auf der Mausposition und den Offsets.
Aktualisiert die linken und oberen CSS-Eigenschaften des Elements, um es an die neue Position zu verschieben.

Ziehen stoppen: Die StopDragging-Funktion wird ausgelöst, wenn der Benutzer die Maustaste loslässt. Diese Funktion:

Entfernt die Ziehklasse, um den Cursor wieder in seinen ursprünglichen Zustand zu versetzen.
Entfernt den Mousemove-Ereignis-Listener aus dem Dokument, um das Ziehen zu stoppen. Mehr lesen

Fazit:
Durch das Verständnis der Grundlagen von Ereignis-Listenern und DOM-Manipulation können wir unseren Webprojekten Interaktivität hinzufügen und so das Benutzererlebnis verbessern.

Vollständigen Artikel lesen – hier klicken

Das obige ist der detaillierte Inhalt vonErstellen eines ziehbaren Elements mit HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html define for while select using class Property Event function default dom this position border background

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：CSS für Formulare: Verbesserung der BenutzererfahrungNächster Artikel：CSS für Formulare: Verbesserung der Benutzererfahrung

In Verbindung stehende Artikel

Mehr sehen