Mercurial Hosting > dad

changeset 5:1293cb0d30da

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
minor
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 17:14:52 -0600
parents 0130ae25ef94
children 4d699321068f
files src/dad.js src/examples/drop.html src/index.html
diffstat 3 files changed, 23 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
diff -r 0130ae25ef94 -r 1293cb0d30da src/dad.js
--- a/src/dad.js	Sat Apr 22 21:17:53 2023 -0600
+++ b/src/dad.js	Sun Apr 23 17:14:52 2023 -0600
@@ -46,8 +46,8 @@
 	function onMouseUp(event) {
 		//console.log(event);
 		dad.onDrop({
-			draggable: original,
-			dragged: dragging,
+			original: original,
+			dragging: dragging,
 			mouseEvent: event,
 		});
 		original.removeAttribute('dad-original');
@@ -58,7 +58,7 @@
 		document.removeEventListener('touchend',onMouseUp);
 		original.scrollIntoViewIfNeeded(false);
 		let droppedEvent = {
-			draggable: original,
+			original: original,
 		};
 		original = null;
 		dragging = null;
diff -r 0130ae25ef94 -r 1293cb0d30da src/examples/drop.html
--- a/src/examples/drop.html	Sat Apr 22 21:17:53 2023 -0600
+++ b/src/examples/drop.html	Sun Apr 23 17:14:52 2023 -0600
@@ -25,12 +25,12 @@
 			};
 
 			dad.onDrop = function(event) {
-				let draggable = event.draggable;
-				let style = draggable.style;
+				let original = event.original;
+				let style = original.style;
 				let left = style.left ? parseInt(style.left) : 0;
 				let top = style.top ? parseInt(style.top) : 0;
-				let rectDragged = event.dragged.getBoundingClientRect();
-				let rectDraggable = draggable.getBoundingClientRect();
+				let rectDragged = event.dragging.getBoundingClientRect();
+				let rectDraggable = original.getBoundingClientRect();
 				left += rectDragged.x - rectDraggable.x;
 				top += rectDragged.y - rectDraggable.y;
 				style.left = left + 'px';
diff -r 0130ae25ef94 -r 1293cb0d30da src/index.html
--- a/src/index.html	Sat Apr 22 21:17:53 2023 -0600
+++ b/src/index.html	Sun Apr 23 17:14:52 2023 -0600
@@ -4,6 +4,12 @@
 		<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>
@@ -26,5 +32,15 @@
 			<li><a href="/examples/drop.html">Drop</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>