Mercurial Hosting > dad
changeset 8:969d5980b375
add lists
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Sun, 23 Apr 2023 23:55:37 -0600 |
| parents | 332d3e280f7e |
| children | eee8862be4c7 |
| files | src/dad.css src/dad.js src/examples/list.html src/examples/list2.html src/index.html |
| diffstat | 5 files changed, 130 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/src/dad.css Sun Apr 23 20:46:17 2023 -0600 +++ b/src/dad.css Sun Apr 23 23:55:37 2023 -0600 @@ -9,5 +9,6 @@ [dad-dragging] { position: fixed !important; + margin: 0 !important; z-index: 100; }
--- a/src/dad.js Sun Apr 23 20:46:17 2023 -0600 +++ b/src/dad.js Sun Apr 23 23:55:37 2023 -0600 @@ -126,6 +126,8 @@ let rect = original.getBoundingClientRect(); dragging.style.left = `${rect.x}px`; dragging.style.top = `${rect.y}px`; + dragging.style.width = `${rect.width}px`; + dragging.style.heigh = `${rect.heigh}px`; original.parentNode.appendChild(dragging); }
--- /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>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/list2.html Sun Apr 23 23:55:37 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"; + + [item] { + background-color: LightGreen; + padding: 8px; + } + </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.onEnter = function(event) { + let dropzone = event.dropzone + 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>Dynamic 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>
--- a/src/index.html Sun Apr 23 20:46:17 2023 -0600 +++ b/src/index.html Sun Apr 23 23:55:37 2023 -0600 @@ -31,6 +31,8 @@ <li><a href="/examples/handle.html">Handle</a></li> <li><a href="/examples/drop.html">Drop</a></li> <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> </ul> <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.