Erstellen eines ziehbaren Elements mit HTML, CSS und JavaScript

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:

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:

       
  
Drag me!
   

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

Hinzufügen von Interaktivität mit JavaScript

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 StartDragging-Funktion wird ausgelöst, wenn der Benutzer die Maustaste auf das Element drückt. Diese Funktion:

1. Verhindert das Standardverhalten des Ereignisses mithilfe von e.preventDefault().
2. Berechnet die Versätze, indem die Position der oberen linken Ecke des Elements von der Mausposition subtrahiert wird.
3. Fügt die Ziehklasse hinzu, um den Cursor zu ändern.
4. 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:

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

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

1. Entfernt die Ziehklasse, um den Cursor wieder in seinen ursprünglichen Zustand zu versetzen.
2. 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!