Mercurial Hosting > dad
changeset 4:0130ae25ef94
add drop
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sat, 22 Apr 2023 21:17:53 -0600 |
parents | 6d5e4b38b4fb |
children | 1293cb0d30da |
files | src/dad.js src/examples/drop.html src/index.html |
diffstat | 3 files changed, 72 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/src/dad.js Fri Apr 21 00:58:31 2023 -0600 +++ b/src/dad.js Sat Apr 22 21:17:53 2023 -0600 @@ -3,10 +3,12 @@ let dad = {}; { - // override this if needed + // override these if needed dad.whatToDrag = function(draggable) { return draggable; }; + dad.onDrop = function(event) {}; + dad.onDropped = function(event) {}; let original = null; @@ -43,15 +45,24 @@ function onMouseUp(event) { //console.log(event); + dad.onDrop({ + draggable: original, + dragged: dragging, + mouseEvent: event, + }); original.removeAttribute('dad-original'); - document.body.removeChild(dragging); + dragging.parentNode.removeChild(dragging); document.removeEventListener('mousemove',onMouseMove); document.removeEventListener('mouseup',onMouseUp); document.removeEventListener('mousemove',onMouseMove); document.removeEventListener('touchend',onMouseUp); original.scrollIntoViewIfNeeded(false); + let droppedEvent = { + draggable: original, + }; original = null; dragging = null; + dad.onDropped(droppedEvent); } function start(event) { @@ -63,7 +74,7 @@ let rect = original.getBoundingClientRect(); dragging.style.left = `${rect.x}px`; dragging.style.top = `${rect.y}px`; - document.body.appendChild(dragging); + original.parentNode.appendChild(dragging); } function onMouseDown(event) {
--- /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>
--- a/src/index.html Fri Apr 21 00:58:31 2023 -0600 +++ b/src/index.html Sat Apr 22 21:17:53 2023 -0600 @@ -23,6 +23,7 @@ <ul> <li><a href="/examples/simple.html">Simple</a></li> <li><a href="/examples/handle.html">Handle</a></li> + <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>. </body>