Mercurial Hosting > dad
diff src/examples/drop.html @ 4:0130ae25ef94
add drop
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Sat, 22 Apr 2023 21:17:53 -0600 |
| parents | |
| children | 1293cb0d30da |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/drop.html Sat Apr 22 21:17:53 2023 -0600 @@ -0,0 +1,57 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + @import "/dad.css"; + + span[handle] { + display: inline-block; + background-color: LightGreen; + padding: 8px; + } + span[outer] { + display: inline-block; + background-color: LightBlue; + padding: 8px; + position: relative; + } + </style> + <script src="/dad.js"></script> + <script> + dad.whatToDrag = function(draggable) { + return draggable.parentNode; + }; + + dad.onDrop = function(event) { + let draggable = event.draggable; + let style = draggable.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(); + left += rectDragged.x - rectDraggable.x; + top += rectDragged.y - rectDraggable.y; + style.left = left + 'px'; + style.top = top + 'px'; + }; + + function init() { + let span = document.querySelector('span[handle]'); + dad.setDraggable(span); + } + </script> + </head> + <body> + <h1>Handle</h1> + <p> + <span outer> + <span handle>drag me</span> + along for the ride + </span> + </p> + <p>bottom</p> + </body> + <script> init(); </script> +</html>