Mercurial Hosting > dad

changeset 4:0130ae25ef94

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add drop
author Franklin Schmidt <fschmidt@gmail.com>
date Sat, 22 Apr 2023 21:17:53 -0600
parents 6d5e4b38b4fb
children 1293cb0d30da
files src/dad.js src/examples/drop.html src/index.html
diffstat 3 files changed, 72 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/src/dad.js	Fri Apr 21 00:58:31 2023 -0600
+++ b/src/dad.js	Sat Apr 22 21:17:53 2023 -0600
@@ -3,10 +3,12 @@
 let dad = {};
 
 {
-	// override this if needed
+	// override these if needed
 	dad.whatToDrag = function(draggable) {
 		return draggable;
 	};
+	dad.onDrop = function(event) {};
+	dad.onDropped = function(event) {};
 
 
 	let original = null;
@@ -43,15 +45,24 @@
 
 	function onMouseUp(event) {
 		//console.log(event);
+		dad.onDrop({
+			draggable: original,
+			dragged: dragging,
+			mouseEvent: event,
+		});
 		original.removeAttribute('dad-original');
-		document.body.removeChild(dragging);
+		dragging.parentNode.removeChild(dragging);
 		document.removeEventListener('mousemove',onMouseMove);
 		document.removeEventListener('mouseup',onMouseUp);
 		document.removeEventListener('mousemove',onMouseMove);
 		document.removeEventListener('touchend',onMouseUp);
 		original.scrollIntoViewIfNeeded(false);
+		let droppedEvent = {
+			draggable: original,
+		};
 		original = null;
 		dragging = null;
+		dad.onDropped(droppedEvent);
 	}
 
 	function start(event) {
@@ -63,7 +74,7 @@
 		let rect = original.getBoundingClientRect();
 		dragging.style.left = `${rect.x}px`;
 		dragging.style.top = `${rect.y}px`;
-		document.body.appendChild(dragging);
+		original.parentNode.appendChild(dragging);
 	}
 
 	function onMouseDown(event) {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/examples/drop.html	Sat Apr 22 21:17:53 2023 -0600
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			@import "/site.css";
+			@import "/dad.css";
+
+			span[handle] {
+				display: inline-block;
+				background-color: LightGreen;
+				padding: 8px;
+			}
+			span[outer] {
+				display: inline-block;
+				background-color: LightBlue;
+				padding: 8px;
+				position: relative;
+			}
+		</style>
+		<script src="/dad.js"></script>
+		<script>
+			dad.whatToDrag = function(draggable) {
+				return draggable.parentNode;
+			};
+
+			dad.onDrop = function(event) {
+				let draggable = event.draggable;
+				let style = draggable.style;
+				let left = style.left ? parseInt(style.left) : 0;
+				let top = style.top ? parseInt(style.top) : 0;
+				let rectDragged = event.dragged.getBoundingClientRect();
+				let rectDraggable = draggable.getBoundingClientRect();
+				left += rectDragged.x - rectDraggable.x;
+				top += rectDragged.y - rectDraggable.y;
+				style.left = left + 'px';
+				style.top = top + 'px';
+			};
+
+			function init() {
+				let span = document.querySelector('span[handle]');
+				dad.setDraggable(span);
+			}
+		</script>
+	</head>
+	<body>
+		<h1>Handle</h1>
+		<p>
+			<span outer>
+				<span handle>drag me</span>
+				along for the ride
+			</span>
+		</p>
+		<p>bottom</p>
+	</body>
+	<script> init(); </script>
+</html>
--- a/src/index.html	Fri Apr 21 00:58:31 2023 -0600
+++ b/src/index.html	Sat Apr 22 21:17:53 2023 -0600
@@ -23,6 +23,7 @@
 		<ul>
 			<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>
 		</ul>
 		<p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.
 	</body>