diff src/examples/dropzones.html @ 6:4d699321068f

add dropzones
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 18:34:12 -0600
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/examples/dropzones.html	Sun Apr 23 18:34:12 2023 -0600
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			@import "/site.css";
+			@import "/dad.css";
+
+			[drag] {
+				display: inline-block;
+				background-color: LightGreen;
+				padding: 8px;
+			}
+			[dropzone] {
+				background-color: LightBlue;
+				padding: 8px;
+			}
+			[dropzone][in] {
+				border: 1px solid;
+			}
+		</style>
+		<script src="/dad.js"></script>
+		<script>
+			dad.onEnter = function(event) {
+				event.dropzone.setAttribute('in','');
+			};
+
+			dad.onLeave = function(event) {
+				event.dropzone.removeAttribute('in');
+			};
+
+			dad.onDrop = function(event) {
+				if( event.dropzone )
+					event.dropzone.appendChild(event.original);
+			};
+
+			function init() {
+				let drag = document.querySelector('[drag]');
+				dad.setDraggable(drag);
+				let dropzones = document.querySelectorAll('[dropzone]');
+				for( let i=0; i<dropzones.length; i++ ) {
+					let dropzone = dropzones[i];
+					dad.setDropzone(dropzone);
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<h1>Dropzones</h1>
+		<p dropzone>dropzone 1 <span drag>drag me</span></p>
+		<p dropzone>dropzone 2 </p>
+		<p dropzone>dropzone 3 </p>
+		<p>bottom</p>
+	</body>
+	<script> init(); </script>
+</html>