Mercurial Hosting > dad

<!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>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Thu, 11 May 2023 14:37:10 -0600
parents	969d5980b375
children