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