Mercurial Hosting > dad

<!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>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Sun, 23 Apr 2023 23:55:37 -0600
parents	264646feb67b
children	eee8862be4c7