Mercurial Hosting > dad

diff src/alternatives/draggabilly.html @ 2:264646feb67b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add draggabilly
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 20 Apr 2023 15:55:43 -0600
parents src/alternatives/interactjs.html@9c372fce698a
children eee8862be4c7
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>