changeset 8:969d5980b375

add lists
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 23:55:37 -0600
parents 332d3e280f7e
children eee8862be4c7
files src/dad.css src/dad.js src/examples/list.html src/examples/list2.html src/index.html
diffstat 5 files changed, 130 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
diff -r 332d3e280f7e -r 969d5980b375 src/dad.css
--- a/src/dad.css	Sun Apr 23 20:46:17 2023 -0600
+++ b/src/dad.css	Sun Apr 23 23:55:37 2023 -0600
@@ -9,5 +9,6 @@
 
 [dad-dragging] {
 	position: fixed !important;
+	margin: 0 !important;
 	z-index: 100;
 }
diff -r 332d3e280f7e -r 969d5980b375 src/dad.js
--- a/src/dad.js	Sun Apr 23 20:46:17 2023 -0600
+++ b/src/dad.js	Sun Apr 23 23:55:37 2023 -0600
@@ -126,6 +126,8 @@
 		let rect = original.getBoundingClientRect();
 		dragging.style.left = `${rect.x}px`;
 		dragging.style.top = `${rect.y}px`;
+		dragging.style.width = `${rect.width}px`;
+		dragging.style.heigh = `${rect.heigh}px`;
 		original.parentNode.appendChild(dragging);
 	}
 
diff -r 332d3e280f7e -r 969d5980b375 src/examples/list.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/examples/list.html	Sun Apr 23 23:55:37 2023 -0600
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			@import "/site.css";
+			@import "/dad.css";
+
+			[item] {
+				background-color: LightGreen;
+				padding: 8px;
+			}
+			[item][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');
+			};
+
+			function indexOf(a,el) {
+				for( let i=0; i<a.length; i++ ) {
+					if( a[i] === el )
+						return i;
+				}
+				return -1;
+			}
+
+			dad.onDrop = function(event) {
+				let dropzone = event.dropzone
+				if( !dropzone )
+					return;
+				let original = event.original
+				let items = document.querySelectorAll('[item]');
+				let iDropzone = indexOf(items,dropzone);
+				let iOriginal = indexOf(items,original);
+				let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend';
+				dropzone.insertAdjacentElement(where,original);
+			};
+
+			function init() {
+				let items = document.querySelectorAll('[item]');
+				for( let i=0; i<items.length; i++ ) {
+					let item = items[i];
+					dad.setDraggable(item);
+					dad.setDropzone(item);
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<h1>List</h1>
+		<script>
+			for( let i=1; i<=10; i++ ) {
+				document.write(`
+		<p item>${i} - drag me</p>
+`				);
+			}
+		</script>
+		<p>bottom</p>
+	</body>
+	<script> init(); </script>
+</html>
diff -r 332d3e280f7e -r 969d5980b375 src/examples/list2.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/examples/list2.html	Sun Apr 23 23:55:37 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";
+
+			[item] {
+				background-color: LightGreen;
+				padding: 8px;
+			}
+		</style>
+		<script src="/dad.js"></script>
+		<script>
+			function indexOf(a,el) {
+				for( let i=0; i<a.length; i++ ) {
+					if( a[i] === el )
+						return i;
+				}
+				return -1;
+			}
+
+			dad.onEnter = function(event) {
+				let dropzone = event.dropzone
+				let original = event.original
+				let items = document.querySelectorAll('[item]');
+				let iDropzone = indexOf(items,dropzone);
+				let iOriginal = indexOf(items,original);
+				let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend';
+				dropzone.insertAdjacentElement(where,original);
+			};
+
+			function init() {
+				let items = document.querySelectorAll('[item]');
+				for( let i=0; i<items.length; i++ ) {
+					let item = items[i];
+					dad.setDraggable(item);
+					dad.setDropzone(item);
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<h1>Dynamic List</h1>
+		<script>
+			for( let i=1; i<=10; i++ ) {
+				document.write(`
+		<p item>${i} - drag me</p>
+`				);
+			}
+		</script>
+		<p>bottom</p>
+	</body>
+	<script> init(); </script>
+</html>
diff -r 332d3e280f7e -r 969d5980b375 src/index.html
--- a/src/index.html	Sun Apr 23 20:46:17 2023 -0600
+++ b/src/index.html	Sun Apr 23 23:55:37 2023 -0600
@@ -31,6 +31,8 @@
 			<li><a href="/examples/handle.html">Handle</a></li>
 			<li><a href="/examples/drop.html">Drop</a></li>
 			<li><a href="/examples/dropzones.html">Dropzones</a></li>
+			<li><a href="/examples/list.html">List</a></li>
+			<li><a href="/examples/list2.html">Dynamic List</a></li>
 		</ul>
 		<p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.