Drag'n'drop in pure JS

3 years ago · 9d76d6cee2
1 changed files with 86 additions and 0 deletions
--- a/drag-and-drop.html
+++ b/drag-and-drop.html
@ -0,0 +1,86 @@
 <!DOCTYPE html>
 <html>
 	<head>
 	</head>
 	<body>
 		<table>
 			<thread>
 				<tr>
 					<th>Cell</th>
 					<th>Cell</th>
 					<th>Cell</th>
 					<th>Cell</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr draggable="true" class="dropzone">
 					<td draggable="false">1</td>
 					<td draggable="false">1</td>
 					<td draggable="false">1</td>
 					<td draggable="false">1</td>
 				</tr>
 				<tr draggable="true" class="dropzone">
 					<td draggable="false">2</td>
 					<td draggable="false">2</td>
 					<td draggable="false">2</td>
 					<td draggable="false">2</td>
 				</tr>
 				<tr draggable="true" class="dropzone">
 					<td draggable="false">3</td>
 					<td draggable="false">3</td>
 					<td draggable="false">3</td>
 					<td draggable="false">3</td>
 				</tr>
 			</tbody>
 		</table>
 	</body>
 	<script>
 		(function() {
 			let dragged = null;
 			document.addEventListener("dragstart", function(event) {
 				dragged = event.target;
 				event.target.style.opacity = .5;
 			});
 			document.addEventListener("dragenter", function(event) {
 				const parent = event.target.parentNode;
 				if (parent.className == "dropzone") {
 					event.target.parentNode.style.background = "#7f7f7f";
 				}
 			});
 			document.addEventListener("dragleave", function(event) {
 				const parent = event.target.parentNode;
 				if (parent.className == "dropzone") {
 					event.target.parentNode.style.background = "#ffffff";
 				}
 			});
 			document.addEventListener("dragover", function(event) {
 				// Necessário para que o "drop" funcione.
 				event.preventDefault();
 			});
 			document.addEventListener("drop", function(event) {
 				dragged.style.opacity = 1;
 				event.preventDefault();
 				const row = event.target.parentNode;
 				const table = row.parentNode;
 				if (row.className == "dropzone") {
 					row.style.background = "#ffffff";
 					const movement = dragged.compareDocumentPosition(row);
 					console.log('Movement: ', movement);
 					if (movement === Node.DOCUMENT_POSITION_PRECEDING) {
 						table.insertBefore(dragged, row);
 					} else {
 						table.insertBefore(dragged, row.nextSibling);
 					}
 				}
 			});
 		})();
 	</script>
 </html>