Mercurial Hosting > dad

<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			@import "/site.css";

			code {
				white-space: pre-line;
				display: block;
				margin-left: 32px;
			}
		</style>
		<title>Reactionary Drag and Drop</title>
	</head>
	<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 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 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>
			<li><a href="/examples/drop.html">Drop</a></li>
			<li><a href="/examples/dropzones.html">Dropzones</a></li>
			<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>
				original = dad.whatToDrag(draggable);
				dragging = original.cloneNode(true);
				original.parentNode.appendChild(dragging);
			</code>
		</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>
	</body>
</html>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Sun, 23 Apr 2023 23:55:37 -0600
parents	4d699321068f
children	eee8862be4c7