Mercurial Hosting > dad

changeset 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 e863dbc62217
children 264646feb67b
files src/alternatives/interactjs.html src/alternatives/standard.html src/index.html
diffstat 3 files changed, 131 insertions(+), 1 deletions(-) [+]
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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/alternatives/standard.html	Wed Apr 19 23:04:23 2023 -0600
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			@import "/site.css";
+
+			span[draggable] {
+				display: inline-block;
+				background-color: LightGreen;
+				padding: 8px;
+				cursor: move;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Standard Drag and Drop API</h1>
+
+		<p>As documented on <a href="https://www.w3schools.com/html/html5_draganddrop.asp">w3schools</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">mozilla</a>.</p>
+
+		<p><span draggable="true">drag me</span></p>
+
+		<p>This works on desktop but doesn't work on mobile.  So this API is completely useless.</p>
+	</body>
+</html>
--- a/src/index.html	Tue Apr 18 21:52:25 2023 -0600
+++ b/src/index.html	Wed Apr 19 23:04:23 2023 -0600
@@ -10,6 +10,12 @@
 	<body>
 		<h1>Reactionary Drag and Drop</h1>
 
-		<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 is a <a href="https://communities.win/c/programming/p/16an5RSxmy/javascript-drag-and-drop/c">discussion thread</a> if you want to comment.</p>
+		<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>
+		<ul>
+			<li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li>
+			<li><a href="/alternatives/interactjs.html">interact.js</a></li>
+		</ul>
 	</body>
 </html>