Mercurial Hosting > dad

--- a/src/alternatives/draggabilly.html	Sun Apr 23 23:55:37 2023 -0600
+++ b/src/alternatives/draggabilly.html	Fri Apr 28 21:07:17 2023 -0600
@@ -99,7 +99,7 @@
 	<body>
 		<h1><a href="https://draggabilly.desandro.com/">Draggabilly</a></h1>

-		<p>This supports drag but not drop.  When I try to implement drop in a list, it gets confused when the DOM changes.</p>
+		<p>This supports drag but not drop.  When I try to implement drop in a list, it gets confused when the DOM changes.  The library is in <a href="https://unpkg.com/draggabilly@3.0.0/dist/draggabilly.pkgd.js">draggabilly.pkgd.js</a>.</p>

 		<div>
 		<script>
--- a/src/alternatives/interactjs.html	Sun Apr 23 23:55:37 2023 -0600
+++ b/src/alternatives/interactjs.html	Fri Apr 28 21:07:17 2023 -0600
@@ -85,7 +85,7 @@
 	<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>
+		<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.  The file that one needs to include is <a href="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js">interact.js</a>.</p>

 		<div>
 		<script>
--- a/src/dad.js	Sun Apr 23 23:55:37 2023 -0600
+++ b/src/dad.js	Fri Apr 28 21:07:17 2023 -0600
@@ -23,7 +23,6 @@
 	}

 	function onMouseMove(event) {
-		//console.log(event);
 		{
 			event.preventDefault();
 			let rect = dragging.getBoundingClientRect();
@@ -86,7 +85,6 @@
 	}

 	function onMouseUp(event) {
-		//console.log(event);
 		dad.onDrop({
 			original: original,
 			dragging: dragging,
@@ -118,7 +116,6 @@
 	}

 	function start(event) {
-		//console.log(event);
 		original = dad.whatToDrag(event.target);
 		dragging = original.cloneNode(true);
 		original.setAttribute('dad-original','');
--- a/src/index.html	Sun Apr 23 23:55:37 2023 -0600
+++ b/src/index.html	Fri Apr 28 21:07:17 2023 -0600
@@ -5,6 +5,12 @@
 		<style>
 			@import "/site.css";

+			h1 {
+				margin-bottom: 8px;
+			}
+			h4 {
+				margin-top: 0;
+			}
 			code {
 				white-space: pre-line;
 				display: block;
@@ -15,8 +21,9 @@
 	</head>
 	<body>
 		<h1>Reactionary Drag and Drop</h1>
+		<h4><a href="http://www.reactionary.software/">Reactionary Software</a> by <a href="https://www.linkmystyle.com/fschmidt">fschmidt</a></h4>

-		<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 can't find a usable drag-and-drop JavaScript library, so, as usual, I am forced to write one.  I need something that works on mobile, supports both drag and dropzones, and is simple to use.  And it shouldn't require an abomination like <b>npm</b> to get the files, one should just be able to download the needed files directly.  </p>

 		<p>I will start by reviewing some of the existing depraved alternatives:</p>
 		<ul>
@@ -25,7 +32,7 @@
 			<li><a href="/alternatives/draggabilly.html">Draggabilly</a></li>
 		</ul>

-		<p>Time to write my own.  Here are some examples:</p>
+		<p>So I wrote my own library in just these two file: <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.  Here are some examples using this library:</p>
 		<ul>
 			<li><a href="/examples/simple.html">Simple</a></li>
 			<li><a href="/examples/handle.html">Handle</a></li>
@@ -34,7 +41,6 @@
 			<li><a href="/examples/list.html">List</a></li>
 			<li><a href="/examples/list2.html">Dynamic List</a></li>
 		</ul>
-		<p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.

 		<p>When dragging starts, this happens:
 			<code>
@@ -45,5 +51,9 @@
 		</p>

 		<p>Most drag-and-drop tools drag the original by setting <b>position</b> to <b>relative</b> and moving it by setting <b>left</b> and <b>top</b>.  But this breaks if the DOM is changed.  So instead I clone the original and set <b>position</b> of the clone to <b>fixed</b>.  This way, changing the DOM doesn't affect the location of what is being dragged.</p>
+
+		<p>This library is fairly trivial which makes it a good example of <a href="http://www.reactionary.software/">reactionary software</a>.  And it is purely JavaScript which everyone knows.  Just compare the depraved alternatives listed to my code.  My code is much simpler and is fully functional and robust.  All of the modern alternatives are overcomplicated and fragile garbage.  All modern code is like this, all just horrible garbage.</p>
+
+		<p>Here is <a href="https://hg.reactionary.software/repo/dad/">the source</a> of this website.  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>
 	</body>
 </html>