Mercurial Hosting > dad
diff src/examples/handle.html @ 3:6d5e4b38b4fb
start drag
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Fri, 21 Apr 2023 00:58:31 -0600 |
parents | |
children | 332d3e280f7e |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/handle.html Fri Apr 21 00:58:31 2023 -0600 @@ -0,0 +1,43 @@ +<!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; + } + </style> + <script src="/dad.js"></script> + <script> + dad.whatToDrag = function(draggable) { + return draggable.parentNode; + }; + + 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>