Mercurial Hosting > dad

diff src/alternatives/interactjs.html @ 1:9c372fce698a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start alternatives
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 19 Apr 2023 23:04:23 -0600
parents
children 6d5e4b38b4fb
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/alternatives/interactjs.html	Wed Apr 19 23:04:23 2023 -0600
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			@import "/site.css";
+
+			div[drag] {
+				border: 1px solid;
+				margin: 8px;
+				padding: 8px;
+				touch-action: none;
+				background-color: LightGreen;
+			}
+		</style>
+		<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js"></script>
+		<script>
+			'use strict';
+
+			let dxDrag, dyDrag;
+
+			function dragStartListener(event) {
+				dxDrag = 0;
+				dyDrag = 0;
+			}
+
+			function dragMoveListener(event) {
+				dxDrag += event.dx;
+				dyDrag += event.dy;
+				event.target.style.transform = `translate(${dxDrag}px, ${dyDrag}px)`;
+			}
+
+			function dragEndListener(event) {
+				event.target.style.transform = null;
+			}
+
+			function indexOf(a,el) {
+				for( let i=0; i<a.length; i++ ) {
+					if( a[i] === el )
+						return i;
+				}
+				return -1;
+			}
+
+			function dragEnterListener(event) {
+				console.log(event);
+				let entered = event.target;
+				let dragging = event.relatedTarget;
+				if( entered === dragging )
+					return;
+				let divs = document.querySelectorAll('div[drag]');
+				let iEntered = indexOf(divs,entered);
+				let iDragging = indexOf(divs,dragging);
+				console.log(iDragging+' '+iEntered);
+				let parent = entered.parentNode;
+				if( iDragging < iEntered ) {
+					let next = divs[iEntered+1];
+					if( next ) {
+						parent.insertBefore( dragging, next );
+					} else {
+						parent.appendChild( dragging );
+					}
+				} else {
+					parent.insertBefore( dragging, entered );
+				}
+			}
+
+			function init() {
+				let dad = interact('div[drag]');
+				dad.draggable({
+					listeners: {
+						start: dragStartListener,
+						move: dragMoveListener,
+						end: dragEndListener,
+					}
+				});
+				dad.dropzone({
+					ondragenter: dragEnterListener,
+				});
+			}
+		</script>
+	</head>
+	<body>
+		<h1><a href="https://interactjs.io/">interact.js</a></h1>
+
+		<p>This has a number of problems.  First, it is clearly too complicated.  And this means that it isn't on just one JavaScript file.  One has to use the modern horror of <b>npm</b> to get it (which I refuse to do).  The suggested way of handling dragging doesn't work when the DOM changes, as the example below shows.  There is probably some complicated way around this, but I can't be bothered given the other issues.</p>
+
+		<div>
+		<script>
+			for( let i=1; i<=10; i++ ) {
+				document.write(`
+			<div drag id="${i}">${i} - drag me</div>
+`				);
+			}
+		</script>
+		</div>
+	</body>
+	<script> init(); </script>
+</html>