diff src/index.html @ 5:1293cb0d30da

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 17:14:52 -0600
parents 0130ae25ef94
children 4d699321068f
line wrap: on
line diff
--- 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>