Mercurial Hosting > dad
diff src/examples/list.html @ 8:969d5980b375
add lists
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Sun, 23 Apr 2023 23:55:37 -0600 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/list.html Sun Apr 23 23:55:37 2023 -0600 @@ -0,0 +1,69 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + @import "/dad.css"; + + [item] { + background-color: LightGreen; + padding: 8px; + } + [item][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'); + }; + + function indexOf(a,el) { + for( let i=0; i<a.length; i++ ) { + if( a[i] === el ) + return i; + } + return -1; + } + + dad.onDrop = function(event) { + let dropzone = event.dropzone + if( !dropzone ) + return; + let original = event.original + let items = document.querySelectorAll('[item]'); + let iDropzone = indexOf(items,dropzone); + let iOriginal = indexOf(items,original); + let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend'; + dropzone.insertAdjacentElement(where,original); + }; + + function init() { + let items = document.querySelectorAll('[item]'); + for( let i=0; i<items.length; i++ ) { + let item = items[i]; + dad.setDraggable(item); + dad.setDropzone(item); + } + } + </script> + </head> + <body> + <h1>List</h1> + <script> + for( let i=1; i<=10; i++ ) { + document.write(` + <p item>${i} - drag me</p> +` ); + } + </script> + <p>bottom</p> + </body> + <script> init(); </script> +</html>