Mercurial Hosting > dad

changeset 6:4d699321068f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add dropzones
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 18:34:12 -0600
parents 1293cb0d30da
children 332d3e280f7e
files src/dad.css src/dad.js src/examples/dropzones.html src/index.html
diffstat 4 files changed, 123 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/src/dad.css	Sun Apr 23 17:14:52 2023 -0600
+++ b/src/dad.css	Sun Apr 23 18:34:12 2023 -0600
@@ -9,4 +9,5 @@
 
 [dad-dragging] {
 	position: fixed !important;
+	z-index: 100;
 }
--- a/src/dad.js	Sun Apr 23 17:14:52 2023 -0600
+++ b/src/dad.js	Sun Apr 23 18:34:12 2023 -0600
@@ -9,24 +9,64 @@
 	};
 	dad.onDrop = function(event) {};
 	dad.onDropped = function(event) {};
+	dad.onEnter = function(event) {};
+	dad.onLeave = function(event) {};
 
 
 	let original = null;
 	let dragging = null;
+	let dropzone = null;
 	let touchX, touchY;
 
+	function isIn(x,y,rect) {
+		return rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height;
+	}
+
 	function onMouseMove(event) {
 		//console.log(event);
-		event.preventDefault();
-		let rect = dragging.getBoundingClientRect();
-		dragging.style.left = `${rect.x+event.movementX}px`;
-		let y = rect.y + event.movementY;
-		if( y < 0 ) {
-			window.scrollBy( 0, y );
-		} else if( y + rect.height > window.innerHeight ) {
-			window.scrollBy( 0, y + rect.height - window.innerHeight );
+		{
+			event.preventDefault();
+			let rect = dragging.getBoundingClientRect();
+			dragging.style.left = `${rect.x+event.movementX}px`;
+			let y = rect.y + event.movementY;
+			if( y < 0 ) {
+				window.scrollBy( 0, y );
+			} else if( y + rect.height > window.innerHeight ) {
+				window.scrollBy( 0, y + rect.height - window.innerHeight );
+			}
+			dragging.style.top = `${y}px`;
 		}
-		dragging.style.top = `${y}px`;
+		{
+			let x = event.clientX;
+			let y = event.clientY;
+			if( !(dropzone && isIn(x,y,dropzone.getBoundingClientRect())) ) {
+				if( dropzone ) {
+					dad.onLeave({
+						original: original,
+						dragging: dragging,
+						dropzone: dropzone,
+						mouseEvent: event,
+					});
+					dropzone = null;
+				}
+				let dropzones = document.querySelectorAll('[dad-dropzone]');
+				for( let i=0; i<dropzones.length; i++ ) {
+					let dz = dropzones[i];
+					if( dz === dragging )
+						continue;
+					if( isIn(x,y,dz.getBoundingClientRect()) ) {
+						dropzone = dz;
+						dad.onEnter({
+							original: original,
+							dragging: dragging,
+							dropzone: dropzone,
+							mouseEvent: event,
+						});
+						break;
+					}
+				}
+			}
+		}
 	}
 
 	function onTouchMove(event) {
@@ -36,6 +76,8 @@
 		let touch = touches[0];
 		let x = touch.clientX;
 		let y = touch.clientY;
+		event.clientX = x;
+		event.clientY = y;
 		event.movementX = x - touchX;
 		event.movementY = y - touchY;
 		touchX = x;
@@ -48,8 +90,17 @@
 		dad.onDrop({
 			original: original,
 			dragging: dragging,
+			dropzone: dropzone,
 			mouseEvent: event,
 		});
+		if( dropzone ) {
+			dad.onLeave({
+				original: original,
+				dragging: dragging,
+				dropzone: dropzone,
+				mouseEvent: event,
+			});
+		}
 		original.removeAttribute('dad-original');
 		dragging.parentNode.removeChild(dragging);
 		document.removeEventListener('mousemove',onMouseMove);
@@ -62,6 +113,7 @@
 		};
 		original = null;
 		dragging = null;
+		dropzone = null;
 		dad.onDropped(droppedEvent);
 	}
 
@@ -100,4 +152,8 @@
 		el.addEventListener('mousedown',onMouseDown);
 		el.addEventListener('touchstart',onTouchStart);
 	};
+
+	dad.setDropzone = function(el) {
+		el.setAttribute('dad-dropzone','');
+	};
 }
--- /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>
--- a/src/index.html	Sun Apr 23 17:14:52 2023 -0600
+++ b/src/index.html	Sun Apr 23 18:34:12 2023 -0600
@@ -30,6 +30,7 @@
 			<li><a href="/examples/simple.html">Simple</a></li>
 			<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>
 		</ul>
 		<p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.