Mercurial Hosting > dad

<!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>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Tue, 18 Feb 2025 17:23:17 -0700
parents	src/examples/list2.html@969d5980b375
children