Mercurial Hosting > dad

comparison src/index.html @ 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
comparison
equal deleted inserted replaced
4:0130ae25ef94 5:1293cb0d30da
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style> 5 <style>
6 @import "/site.css"; 6 @import "/site.css";
7
8 code {
9 white-space: pre-line;
10 display: block;
11 margin-left: 32px;
12 }
7 </style> 13 </style>
8 <title>Reactionary Drag and Drop</title> 14 <title>Reactionary Drag and Drop</title>
9 </head> 15 </head>
10 <body> 16 <body>
11 <h1>Reactionary Drag and Drop</h1> 17 <h1>Reactionary Drag and Drop</h1>
24 <li><a href="/examples/simple.html">Simple</a></li> 30 <li><a href="/examples/simple.html">Simple</a></li>
25 <li><a href="/examples/handle.html">Handle</a></li> 31 <li><a href="/examples/handle.html">Handle</a></li>
26 <li><a href="/examples/drop.html">Drop</a></li> 32 <li><a href="/examples/drop.html">Drop</a></li>
27 </ul> 33 </ul>
28 <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>. 34 <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.
35
36 <p>When dragging starts, this happens:
37 <code>
38 original = dad.whatToDrag(draggable);
39 dragging = original.cloneNode(true);
40 original.parentNode.appendChild(dragging);
41 </code>
42 </p>
43
44 <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>
29 </body> 45 </body>
30 </html> 46 </html>