• Give item an attribute name of data-draggable-item

<script>
document.addEventListener("DOMContentLoaded", () => {
	let zIndex = 1;
	document.querySelectorAll("[data-draggable-item]").forEach((item) => {
		item.style.touchAction = "none";
		let startX, startY, originX, originY;
		function onPointerDown(e) {
			e.preventDefault();
			item.style.zIndex = ++zIndex;
			startX = e.clientX;
			startY = e.clientY;
			originX = parseFloat(item.dataset.x) || 0;
			originY = parseFloat(item.dataset.y) || 0;
			item.setPointerCapture(e.pointerId);
			item.addEventListener("pointermove", onPointerMove);
			item.addEventListener("pointerup", onPointerUp);
			item.addEventListener("pointercancel", onPointerUp);
		}
		function onPointerMove(e) {
			const dx = e.clientX - startX;
			const dy = e.clientY - startY;
			const x = originX + dx;
			const y = originY + dy;
			item.dataset.x = x;
			item.dataset.y = y;
			item.style.transform = `translate3d(${x}px, ${y}px, 0)`;
		}
		function onPointerUp(e) {
			item.releasePointerCapture(e.pointerId);
			item.removeEventListener("pointermove", onPointerMove);
			item.removeEventListener("pointerup", onPointerUp);
			item.removeEventListener("pointercancel", onPointerUp);
		}
		item.addEventListener("pointerdown", onPointerDown);
	});
});
</script>