Mercurial Hosting > dad

--- a/src/alternatives/interactjs.html	Thu Apr 20 15:55:43 2023 -0600
+++ b/src/alternatives/interactjs.html	Fri Apr 21 00:58:31 2023 -0600
@@ -43,6 +43,7 @@
 			}

 			function dragEnterListener(event) {
+				//return;
 				console.log(event);
 				let entered = event.target;
 				let dragging = event.relatedTarget;
@@ -68,6 +69,7 @@
 			function init() {
 				let dad = interact('div[drag]');
 				dad.draggable({
+					autoScroll: true,
 					listeners: {
 						start: dragStartListener,
 						move: dragMoveListener,
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/dad.css	Fri Apr 21 00:58:31 2023 -0600
@@ -0,0 +1,12 @@
+[dad-drag] {
+	cursor: move;
+	touch-action: none;
+}
+
+[dad-original] {
+	visibility: hidden !important;
+}
+
+[dad-dragging] {
+	position: fixed !important;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/dad.js	Fri Apr 21 00:58:31 2023 -0600
@@ -0,0 +1,92 @@
+'use strict';
+
+let dad = {};
+
+{
+	// override this if needed
+	dad.whatToDrag = function(draggable) {
+		return draggable;
+	};
+
+
+	let original = null;
+	let dragging = null;
+	let touchX, touchY;
+
+	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 );
+		}
+		dragging.style.top = `${y}px`;
+	}
+
+	function onTouchMove(event) {
+		let touches = event.touches;
+		if( touches.length !== 1 )
+			return;
+		let touch = touches[0];
+		let x = touch.clientX;
+		let y = touch.clientY;
+		event.movementX = x - touchX;
+		event.movementY = y - touchY;
+		touchX = x;
+		touchY = y;
+		onMouseMove(event);
+	}
+
+	function onMouseUp(event) {
+		//console.log(event);
+		original.removeAttribute('dad-original');
+		document.body.removeChild(dragging);
+		document.removeEventListener('mousemove',onMouseMove);
+		document.removeEventListener('mouseup',onMouseUp);
+		document.removeEventListener('mousemove',onMouseMove);
+		document.removeEventListener('touchend',onMouseUp);
+		original.scrollIntoViewIfNeeded(false);
+		original = null;
+		dragging = null;
+	}
+
+	function start(event) {
+		//console.log(event);
+		original = dad.whatToDrag(event.target);
+		dragging = original.cloneNode(true);
+		original.setAttribute('dad-original','');
+		dragging.setAttribute('dad-dragging','');
+		let rect = original.getBoundingClientRect();
+		dragging.style.left = `${rect.x}px`;
+		dragging.style.top = `${rect.y}px`;
+		document.body.appendChild(dragging);
+	}
+
+	function onMouseDown(event) {
+		start(event);
+		document.addEventListener('mousemove',onMouseMove);
+		document.addEventListener('mouseup',onMouseUp);
+	}
+
+	function onTouchStart(event) {
+		start(event);
+		let touches = event.touches;
+		if( touches.length !== 1 )
+			return;
+		let touch = touches[0];
+		touchX = touch.clientX;
+		touchY = touch.clientY;
+		document.addEventListener('touchmove',onTouchMove);
+		document.addEventListener('touchend',onMouseUp);
+	}
+
+	dad.setDraggable = function(el) {
+		el.setAttribute('dad-drag','');
+		el.addEventListener('mousedown',onMouseDown);
+		el.addEventListener('touchstart',onTouchStart);
+	};
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/examples/handle.html	Fri Apr 21 00:58:31 2023 -0600
@@ -0,0 +1,43 @@
+<!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;
+			}
+		</style>
+		<script src="/dad.js"></script>
+		<script>
+			dad.whatToDrag = function(draggable) {
+				return draggable.parentNode;
+			};
+
+			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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/examples/simple.html	Fri Apr 21 00:58:31 2023 -0600
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			@import "/site.css";
+			@import "/dad.css";
+
+			span[drag] {
+				display: inline-block;
+				background-color: LightGreen;
+				padding: 8px;
+			}
+		</style>
+		<script src="/dad.js"></script>
+		<script>
+			function init() {
+				let span = document.querySelector('span[drag]');
+				dad.setDraggable(span);
+			}
+		</script>
+	</head>
+	<body>
+		<h1>Simple</h1>
+		<p><span drag>drag me</span></p>
+		<p>bottom</p>
+	</body>
+	<script> init(); </script>
+</html>
--- a/src/index.html	Thu Apr 20 15:55:43 2023 -0600
+++ b/src/index.html	Fri Apr 21 00:58:31 2023 -0600
@@ -12,11 +12,18 @@

 		<p>I can't find a usable drag-and-drop JavaScript library, so, as usual, I am forced to write one.  You can follow my progress, starting from zero, right here.  Here is <a href="https://hg.reactionary.software/repo/dad/">the source</a>.  Here is <a href="http://www.reactionary.software/drag.html">the need</a>.  And here are discussion threads on <a href="https://communities.win/c/programming/p/16an5RSxmy/javascript-drag-and-drop/c">Scored</a> and <a href="http://www.mikraite.org/JavaScript-Drag-and-Drop-tp3229.html">Reactionary Software</a> if you want to comment.</p>

-		<p>I will start by reviewing the existing depraved alternatives:</p>
+		<p>I will start by reviewing some of the existing depraved alternatives:</p>
 		<ul>
 			<li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li>
 			<li><a href="/alternatives/interactjs.html">interact.js</a></li>
 			<li><a href="/alternatives/draggabilly.html">Draggabilly</a></li>
 		</ul>
+
+		<p>Time to write my own.  Here are some examples:</p>
+		<ul>
+			<li><a href="/examples/simple.html">Simple</a></li>
+			<li><a href="/examples/handle.html">Handle</a></li>
+		</ul>
+		<p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.
 	</body>
 </html>