Mercurial Hosting > dad

<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			@import "/site.css";
			@import "/dad.css";

			[handle] {
				display: inline-block;
				background-color: LightGreen;
				padding: 8px;
			}
			[outer] {
				display: inline-block;
				background-color: LightBlue;
				padding: 8px;
				position: relative;
			}
		</style>
		<script src="/dad.js"></script>
		<script>
			dad.whatToDrag = function(draggable) {
				return draggable.parentNode;
			};

			dad.onDrop = function(event) {
				let original = event.original;
				let style = original.style;
				let left = style.left ? parseInt(style.left) : 0;
				let top = style.top ? parseInt(style.top) : 0;
				let rectDragged = event.dragging.getBoundingClientRect();
				let rectDraggable = original.getBoundingClientRect();
				left += rectDragged.x - rectDraggable.x;
				top += rectDragged.y - rectDraggable.y;
				style.left = left + 'px';
				style.top = top + 'px';
			};

			function init() {
				let handle = document.querySelector('[handle]');
				dad.setDraggable(handle);
			}
		</script>
	</head>
	<body>
		<h1>Handle</h1>
		<p>
			<span outer>
				<span handle>drag me</span>
				along for the ride
			</span>
		</p>
		<p>bottom</p>
	</body>
	<script> init(); </script>
</html>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Fri, 28 Apr 2023 21:07:17 -0600
parents	332d3e280f7e
children