Mercurial Hosting > dad
changeset 2:264646feb67b
add draggabilly
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Thu, 20 Apr 2023 15:55:43 -0600 |
parents | 9c372fce698a |
children | 6d5e4b38b4fb |
files | src/alternatives/draggabilly.html src/index.html |
diffstat | 2 files changed, 116 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/alternatives/draggabilly.html Thu Apr 20 15:55:43 2023 -0600 @@ -0,0 +1,115 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + + div[drag] { + border: 1px solid; + margin: 8px; + padding: 8px; + background-color: LightGreen; + cursor: move; + } + div[drag].is-dragging { + z-index: 1; + } + </style> + <script src="https://unpkg.com/draggabilly@3.0.0/dist/draggabilly.pkgd.js"></script> + <script> + 'use strict'; + + let dragEntered; + + function onDragStart( event, pointer ) { + dragEntered = null; + } + + function indexOf(a,el) { + for( let i=0; i<a.length; i++ ) { + if( a[i] === el ) + return i; + } + return -1; + } + + function onDragEnter(dragging,entered) { + let divs = document.querySelectorAll('div[drag]'); + let iEntered = indexOf(divs,entered); + let iDragging = indexOf(divs,dragging); + console.log(iDragging+' '+iEntered); + let parent = entered.parentNode; + if( iDragging < iEntered ) { + let next = divs[iEntered+1]; + if( next ) { + parent.insertBefore( dragging, next ); + } else { + parent.appendChild( dragging ); + } + } else { + parent.insertBefore( dragging, entered ); + } + } + + function onDragMove( event, pointer, moveVector ) { + let target = pointer.target; + let x = pointer.clientX; + let y = pointer.clientY; + let divs = document.querySelectorAll('div[drag]'); + for( let i=0; i<divs.length; i++ ) { + let div = divs[i]; + if( div === target ) + continue; + let rect = div.getBoundingClientRect(); + if( rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height ) { + if( div !== dragEntered ) { + dragEntered = div; + onDragEnter(target,div); + } + break; + } + } + } + + function onDragEnd( event, pointer ) { + //console.log('onDragEnd'); + //console.log(event); + //console.log(pointer); + let target = pointer.target; + //target.style.left = null; + //target.style.top = null; + target.draggie.setPosition(0,0); + //console.log(target.draggie.position); + } + + function init() { + let divs = document.querySelectorAll('div[drag]'); + for( let i=0; i<divs.length; i++ ) { + let div = divs[i]; + let draggie = new Draggabilly(div,{}); + draggie.on( 'dragStart', onDragStart ); + draggie.on( 'dragMove', onDragMove ); + draggie.on( 'dragEnd', onDragEnd ); + div.draggie = draggie; + } + } + </script> + </head> + <body> + <h1><a href="https://draggabilly.desandro.com/">Draggabilly</a></h1> + + <p>This supports drag but not drop. When I try to implement drop in a list, it gets confused when the DOM changes.</p> + + <div> + <script> + for( let i=1; i<=10; i++ ) { + document.write(` + <div drag id="${i}">${i} - drag me</div> +` ); + } + </script> + </div> + </body> + <script> init(); </script> +</html>
--- a/src/index.html Wed Apr 19 23:04:23 2023 -0600 +++ b/src/index.html Thu Apr 20 15:55:43 2023 -0600 @@ -16,6 +16,7 @@ <ul> <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li> <li><a href="/alternatives/interactjs.html">interact.js</a></li> + <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li> </ul> </body> </html>