Mercurial Hosting > dad
diff src/examples/dropzones.html @ 6:4d699321068f
add dropzones
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Sun, 23 Apr 2023 18:34:12 -0600 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/dropzones.html Sun Apr 23 18:34:12 2023 -0600 @@ -0,0 +1,56 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + @import "/dad.css"; + + [drag] { + display: inline-block; + background-color: LightGreen; + padding: 8px; + } + [dropzone] { + background-color: LightBlue; + padding: 8px; + } + [dropzone][in] { + border: 1px solid; + } + </style> + <script src="/dad.js"></script> + <script> + dad.onEnter = function(event) { + event.dropzone.setAttribute('in',''); + }; + + dad.onLeave = function(event) { + event.dropzone.removeAttribute('in'); + }; + + dad.onDrop = function(event) { + if( event.dropzone ) + event.dropzone.appendChild(event.original); + }; + + function init() { + let drag = document.querySelector('[drag]'); + dad.setDraggable(drag); + let dropzones = document.querySelectorAll('[dropzone]'); + for( let i=0; i<dropzones.length; i++ ) { + let dropzone = dropzones[i]; + dad.setDropzone(dropzone); + } + } + </script> + </head> + <body> + <h1>Dropzones</h1> + <p dropzone>dropzone 1 <span drag>drag me</span></p> + <p dropzone>dropzone 2 </p> + <p dropzone>dropzone 3 </p> + <p>bottom</p> + </body> + <script> init(); </script> +</html>