<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag Queens</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/formstyles.css">
<style>
#dropzone {
border: 2px dashed #ccc;
border-radius: 20px;
text-align: center;
background-color: white;
min-height: 236px;
padding: 20px 0 10px 0;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div id="container">
<h1>Drag Queens</h1>
<h2>Die massgebenden Events für "Drag and Drop"</h2>
<p>Diese Seite ist eine Vorbereitung auf ein File Upload Formular, das es erlaubt, die hochzuladenen Dokumente auf eine "Drop Zone" zu ziehen. Ziel der Testumgebung auf dieser Seite ist es, die massgebenden Drag-Events "zu spüren" und kennenzulernen.</p>
<table class="bordered">
<tr>
<th>Event</td>
<th>Beschreibung</td>
</tr>
<tr>
<td><code>dragenter</code></td>
<td>Das gezogene Dokument "betritt" die "Drop Zone".</td>
</tr>
<tr>
<td><code>dragleave</code></td>
<td>Das gezogene Dokument wird aus der "Drop Zone" herausgezogen.</td>
</tr>
<tr>
<td><code>dragover</code></td>
<td>Das gezogene Dokument befindet sich über der "Drop Zone". Dieses Event wird unerlässlich "abgefeuert".</td>
</tr>
<tr>
<td><code>drop</code></td>
<td>Das gezogene Dokument wird über der "Drop Zone" fallen gelassen (d.h. der User lässt die Maustaste los).</td>
</tr>
</table>
<p>Es gibt noch weitere Drag-Events, die hier jedoch keine Rolle spielen: <code>drag</code>, <code>dragend</code> und <code>dragexit</code>.</p>
<h3>⇩ <span style="color: #f44336;">Öffne die Entwickler-Konsole</span> und ziehe ein Dokument über die "Drop Zone" ⇩</h3>
<div id="dropzone">
<p>"Drop Zone", ziehe ein Dokument auf mich!<br>
Ich bin nichts anders als ein <code><div></code>.</p>
<p>Bei solchen "Drop Zones" wird von den meisten Entwickler:innen so wie hier ein dashed Border eingesetzt.<br>
Mache das auch so, die User werden es einfacher haben, deine "Drop Zone" als solche zu erkennen.</p>
</div>
<p>w3 schools: <a href="https://www.w3schools.com/css/css_border.asp" target="_blank">CSS Borders</a></p>
<script>
const dropzone = document.getElementById("dropzone");
dropzone.addEventListener('dragenter', handlerFunction, false);
dropzone.addEventListener('dragover', handlerFunction, false);
dropzone.addEventListener('dragleave', handlerFunction, false);
dropzone.addEventListener('drop', handlerFunction, false);
function handlerFunction(event) {
console.log(event.type);
// Unbedingt nötig: Das Standard-Verhalten des Browsers verhindern
// Sonst öffnet der Browser die Datei im Browser-Fenster (wenn er kann)
event.preventDefault();
event.stopPropagation();
}
</script>
</body>
</html>