Mercurial Hosting > dad
changeset 5:1293cb0d30da
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
--- 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;
--- 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';
--- 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>