Mercurial Hosting > dad
changeset 20:0b3376e13e22 default tip
add nested example
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Tue, 18 Feb 2025 17:23:17 -0700 |
| parents | dac260018e2e |
| children | |
| files | src/dad.js src/examples/list.html src/examples/list2.html src/examples/nested.html src/index.html |
| diffstat | 5 files changed, 92 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/src/dad.js Sun Sep 15 08:15:23 2024 -0600 +++ b/src/dad.js Tue Feb 18 17:23:17 2025 -0700 @@ -59,9 +59,13 @@ if( dz === dragging ) continue; if( isIn(x,y,dz.getBoundingClientRect()) ) { + let old = dropzone; dropzone = dz; - dad.onEnter(myEvent(event)); - break; + let f = dad.onEnter(myEvent(event)); + if( f === false ) + dropzone = old; + else + break; } } }
--- a/src/examples/list.html Sun Sep 15 08:15:23 2024 -0600 +++ b/src/examples/list.html Tue Feb 18 17:23:17 2025 -0700 @@ -33,7 +33,7 @@ } dad.onDrop = function(event) { - let dropzone = event.dropzone + let dropzone = event.dropzone; if( !dropzone ) return; let original = event.original
--- a/src/examples/list2.html Sun Sep 15 08:15:23 2024 -0600 +++ b/src/examples/list2.html Tue Feb 18 17:23:17 2025 -0700 @@ -22,8 +22,8 @@ } dad.onEnter = function(event) { - let dropzone = event.dropzone - let original = event.original + let dropzone = event.dropzone; + let original = event.original; let items = document.querySelectorAll('[item]'); let iDropzone = indexOf(items,dropzone); let iOriginal = indexOf(items,original);
--- /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>
--- a/src/index.html Sun Sep 15 08:15:23 2024 -0600 +++ b/src/index.html Tue Feb 18 17:23:17 2025 -0700 @@ -40,6 +40,7 @@ <li><a href="/examples/dropzones.html">Dropzones</a></li> <li><a href="/examples/list.html">List</a></li> <li><a href="/examples/list2.html">Dynamic List</a></li> + <li><a href="/examples/nested.html">Nested Dynamic Lists</a></li> </ul> <p>When dragging starts, this happens: