Mercurial Hosting > dad
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>