Drag and Drop mit Javascript

Question

Wie kann ich ein einfaches Drag und Drop Programm mit Vanilla Javascript erstellen?

Answer 1

Hier ist das HTML Markup und CSS für eine einfache ToDo Liste.

<style>
.container{
    font-family: "Trebuchet MS", sans-serif;
    display: flex;
    gap: 30px;
}
.column{
    flex-basis: 20%;
    background: #ddd;
    min-height: 90vh;
    padding: 20px;
    border-radius: 10px;
}
.column h1{
    text-align: center;
    font-size: 22px;
}
.item{
    background: #fff;
    margin: 20px;
    padding: 20px;
    border-radius: 3px;
    cursor: pointer;
}
.invisible{
    display: none;
}
</style>

<div class="container">

    <div class="column">

        <h1>All Tasks</h1>
        <div class="item" draggable="true">Wash Clothes</div>
        <div class="item" draggable="true">Meeting at 9AM</div>
        <div class="item" draggable="true">Fix workshop</div>
        <div class="item" draggable="true">Visit the zoo</div>

    </div>

    <div class="column">
        <h1>In progress</h1>
    </div>
    <div class="column">
        <h1>Paused</h1>
    </div>
    <div class="column">
        <h1>Under Review</h1>
    </div>
    <div class="column">
        <h1>Completed</h1>
    </div>

</div>

Mit Javascript kannst du die HTML5 Drag and Drop Funktionen implementieren.

<script type="text/javascript">
const items = document.querySelectorAll('.item')
const columns = document.querySelectorAll('.column')

items.forEach(item => {
    item.addEventListener('dragstart', dragStart)
    item.addEventListener('dragend', dragEnd)
});

columns.forEach(column => {
    column.addEventListener('dragover', dragOver);
    column.addEventListener('dragenter', dragEnter);
    column.addEventListener('dragleave', dragLeave);
    column.addEventListener('drop', dragDrop);
});

var dragItem = null;

function dragStart() {
    console.log('drag started');
    dragItem = this;
    setTimeout(() => this.className = 'invisible', 0)
}

function dragOver(e) {
  e.preventDefault()
  console.log('drag over');
}

function dragEnter() {
    console.log('drag entered');
}

function dragLeave() {
    console.log('drag left');
}

function dragEnd() {
    console.log('drag ended');
    this.className = 'item'
    dragItem = null;
}

function dragDrop() {
    console.log('drag dropped');
    this.append(dragItem);
}
</script>

Beispiel auf JSFiddle.

Answer 2

Hier ist ein einfaches Beispiel. Zuerst erstellst du ein HTML Gerüst. Die Drag-Events (ondragstart, ondragover, ondrop) der einzelnen Elemente werden mit eigenen Handlern (Funktionen) versehen die aufgerufen werden wenn das Event auftritt. Dabei werden Informationen zum jeweiligen Drag-Event in einem "event" Objekt übergeben.

<div class="example">

  <div class="origin">

    <div id="draggable-1" class="draggable" draggable="true" ondragstart="onDragStart(event);">
      thing 1
    </div>
    
    <div id="draggable-2" class="draggable" draggable="true" ondragstart="onDragStart(event);">
      thing 2
    </div>
    
    <div id="draggable-3" class="draggable" draggable="true" ondragstart="onDragStart(event);">
      thing 3
    </div>
    
  </div>

  <div class="dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);">
  </div>
 
</div>

In Javascript werden die Handler (Funktionen) implementiert, die jeweils das "event" Objekt als Parameter definiert haben.

function onDragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
  event.currentTarget.style.backgroundColor = 'yellow';
}

function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event) {
  const id = event.dataTransfer.getData('text');
  const draggableElement = document.getElementById(id);
  const dropzone = event.target;
  dropzone.appendChild(draggableElement);
  event.dataTransfer.clearData();
}

Mit CSS definierst du noch die Darstellung der Elemente.

.example {
  display: flex;
}

.origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

Demo auf JSFiddle.

Answer 3

Hier ist ein einfaches Beispiel.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erweitertes Drag-and-Drop Beispiel</title>
    <style>
        .draggable {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: move;
        }

        .droppable {
            border: 2px dashed #ccc;
            min-height: 100px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <div class="draggable" draggable="true">Element 1</div>
    <div class="draggable" draggable="true">Element 2</div>
    <div class="draggable" draggable="true">Element 3</div>

    <div class="droppable" id="area1">Ablagefläche 1</div>
    <div class="droppable" id="area2">Ablagefläche 2</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let draggedElement = null;

            function handleDragStart(event) {
                draggedElement = this;
                event.dataTransfer.effectAllowed = 'move';
                event.dataTransfer.setData('text/plain', event.target.innerText);
            }

            function handleDragOver(event) {
                event.preventDefault();
                event.dataTransfer.dropEffect = 'move';
            }

            function handleDrop(event) {
                event.preventDefault();
                const data = event.dataTransfer.getData('text/plain');
                const newElement = document.createElement('div');
                newElement.classList.add('draggable');
                newElement.draggable = true;
                newElement.innerText = data;

                event.target.appendChild(newElement);
            }

            function handleDragEnd(event) {
                draggedElement = null;
            }

            const draggables = document.querySelectorAll('.draggable');
            const droppables = document.querySelectorAll('.droppable');

            draggables.forEach(draggable => {
                draggable.addEventListener('dragstart', handleDragStart);
                draggable.addEventListener('dragend', handleDragEnd);
            });

            droppables.forEach(droppable => {
                droppable.addEventListener('dragover', handleDragOver);
                droppable.addEventListener('drop', handleDrop);
            });
        });
    </script>

</body>
</html>