Mercurial Hosting > dad
diff src/examples/nested.html @ 20:0b3376e13e22 default tip
add nested example
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Tue, 18 Feb 2025 17:23:17 -0700 |
| parents | src/examples/list2.html@969d5980b375 |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/nested.html Tue Feb 18 17:23:17 2025 -0700 @@ -0,0 +1,82 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + @import "/dad.css"; + + [drop] { + margin-top: 8px; + margin-bottom: 8px; + } + [drag] { + background-color: LightGreen; + padding: 8px; + display: inline-block; + } + </style> + <script src="/dad.js"></script> + <script> + function indexOf(a,el) { + for( let i=0; i<a.length; i++ ) { + if( a[i] === el ) + return i; + } + return -1; + } + + dad.whatToDrag = function(draggable) { + return draggable.parentNode; + }; + + dad.onEnter = function(event) { + let dropzone = event.dropzone; + let original = event.original; + let filter = original.getAttribute('drop'); + if( dropzone.getAttribute('drop') !== filter ) { + return false; + } + let items = document.querySelectorAll(`[drop="${filter}"]`); + 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('[drop]'); + for( let item of items ) { + dad.setDropzone(item); + let filter = item.getAttribute('drop'); + let drag = item.querySelector(`[drag="${filter}"]`); + dad.setDraggable(drag); + } + } + </script> + </head> + <body> + <h1>Nested Dynamic Lists</h1> + <ul> + <script> + for( let i=1; i<=5; i++ ) { + document.write(` + <li drop="top">${i} - <span drag=top>drag me</span> + <ul> +` ); + for( let j=1; j<=i; j++ ) { + document.write(` + <li drop="n${i}">${j} - <span drag="n${i}">drag me</span> +` ); + } + document.write(` + </ul> + </li> +` ); + } + </script> + </ul> + <p>bottom</p> + </body> + <script> init(); </script> +</html>