Tutorials

Einfaches Drag & Drop mit reinem HTML5, CSS und JavaScript

Melden

In diesem Tutorial lernst du, wie du eine einfache Drag & Drop-Funktion mit purem HTML, CSS und JavaScript erstellst. Wir nutzen dafür die native HTML5 Drag & Drop API.

Was wir bauen

Wir erstellen zwei Boxen. In einer befindet sich ein Element, das du mit der Maus in die andere Box ziehen kannst.

1. Das HTML-Gerüst

Zuerst brauchen wir die Container (Ziele) und das Element, das bewegt werden soll.

Wichtig: Das Attribut draggable="true" macht ein Element beweglich.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <!-- Box 1 -->
        <div class="drop-zone" id="zone-1">
            <div class="drag-item" id="item-1" draggable="true">Zieh mich!</div>
        </div>

        <!-- Box 2 -->
        <div class="drop-zone" id="zone-2"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. Das CSS (Styling)

Damit wir sehen, was passiert, geben wir den Boxen ein Design.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    gap: 20px;
}

.drop-zone {
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.drag-item {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    border-radius: 8px;
}

/* Klasse für den Zustand, wenn ein Item über der Zone schwebt */
.drop-zone.hover {
    background-color: #e1f5fe;
    border-color: #3498db;
}

3. Das JavaScript (Die Logik)

Hier passiert die Magie. Wir müssen drei Ereignisse (Events) abfangen.

  1. dragstart: Wenn der User anfängt zu ziehen.
  2. dragover: Damit das System weiß, dass man hier etwas ablegen darf (Standardmäßig ist das nämlich verboten).
  3. drop: Wenn der User die Maustaste loslässt.
const item = document.querySelector('.drag-item');
const zones = document.querySelectorAll('.drop-zone');

// 1. Start des Ziehvorgangs
item.addEventListener('dragstart', (e) => {
    // Wir speichern die ID des Elements im "dataTransfer" Objekt
    e.dataTransfer.setData('text/plain', e.target.id);

    // Optional: Ein kleiner Effekt beim Ziehen
    setTimeout(() => {
        e.target.style.display = 'none'; // Versteckt das Original-Element kurzzeitig
    }, 0);
});

// 2. Ende des Ziehvorgangs (falls man doch nicht droppt)
item.addEventListener('dragend', (e) => {
    e.target.style.display = 'flex';
});

// 3. Logik für die Ziel-Zonen
zones.forEach(zone => {
    // Notwendig: Standardverhalten verhindern, um Drop zu erlauben
    zone.addEventListener('dragover', (e) => {
        e.preventDefault();
        zone.classList.add('hover');
    });

    // Visuelles Feedback entfernen, wenn man die Zone verlässt
    zone.addEventListener('dragleave', () => {
        zone.classList.remove('hover');
    });

    // Das eigentliche Loslassen
    zone.addEventListener('drop', (e) => {
        e.preventDefault();
        zone.classList.remove('hover');

        // Die ID des Elements holen
        const id = e.dataTransfer.getData('text/plain');
        const draggableElement = document.getElementById(id);

        // Das Element in die neue Zone verschieben
        zone.appendChild(draggableElement);
    });
});

Zusammenfassung der wichtigsten Punkte:

  1. draggable="true": Ohne dieses Attribut im HTML lässt sich nichts bewegen.
  2. e.preventDefault(): Das ist der wichtigste Teil im dragover. Ohne diesen Aufruf lässt der Browser keinen "Drop" zu (das Symbol zeigt meist ein Verbotsschild).
  3. dataTransfer: Dieses Objekt ist wie eine Zwischenablage, die Daten vom Startpunkt zum Zielpunkt transportiert.

Profi-Tipps für später:

  • Touch-Support: Die native API funktioniert leider schlecht auf Smartphones. Für Mobile-Apps solltest du Bibliotheken wie SortableJS oder Dragula nutzen.
  • UX: Nutze CSS-Klassen (hover), um dem Nutzer sofort zu zeigen, wo er das Element loslassen kann.
  • Listen: Wenn du ganze Listen sortieren willst, ist es oft einfacher, den Index der Elemente zu tauschen, anstatt das DOM-Element manuell zu verschieben.
0