1 Frage zu Draganddrop

Question

Wie greife ich mit JavaScript auf ein per Drag-and-Drop in das Browserfenster gezogenes Bild zu?

Accepted Answer

Um auf ein Bild zuzugreifen, das mit der Maus in das Browserfenster gezogen wurde, kannst du das `dragover` und `drop` Event verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ``... [mehr]

Accepted Answer

Um auf ein Bild zuzugreifen, das mit der Maus in das Browserfenster gezogen wurde, kannst du das `dragover` und `drop` Event verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width initial-scale=1.0"> <title>Bild Drag & Drop</title> <style> #drop-area { width: 300px; height: 200px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; margin: 20px; } </style> </head> <body> <div id="drop-area">Ziehe ein Bild hierher</div> <img id="dropped-image" src="" alt="Dropped Image" style="display:none;"/> <script> const dropArea = document.getElementById('drop-area'); const droppedImage = document.getElementById('dropped-image'); dropArea.addEventListener('dragover', (event) => { event.preventDefault(); // Verhindert das Standardverhalten }); dropArea.addEventListener('drop', (event) => { event.preventDefault(); // Verhindert das Standardverhalten const files = event.dataTransfer.files; // Holt die Dateien if (files.length > 0) { const file = files[0]; // Nimmt die erste Datei const reader = new FileReader(); reader.onload = (e) => { droppedImage.src = e.target.result; // Setzt die Bildquelle droppedImage.style.display = 'block'; // Zeigt das Bild an }; reader.readAsDataURL(file); // Liest die Datei als Data URL } }); </script> </body> </html> ``` In diesem Beispiel wird ein Bereich erstellt, in den du ein Bild ziehen kannst. Wenn das Bild fallen gelassen wird, wird es mit einem `FileReader` gelesen und angezeigt. Achte darauf, dass du nur Bilddateien verarbeiten möchtest, da andere Dateitypen möglicherweise nicht korrekt angezeigt werden.

1 Frage zu Draganddrop

Fragen und Antworten zum Thema Draganddrop

Wie greife ich mit JavaScript auf ein per Drag-and-Drop in das Browserfenster gezogenes Bild zu?