feat: attempt at creating standalone draaggable

1 month ago · 014376678c
1 changed files with 218 additions and 0 deletions
--- a/src/draggable.attempts/1/index.html
+++ b/src/draggable.attempts/1/index.html
@ -0,0 +1,218 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Document</title>
 	</head>
 	<body>
 		<div id="container">
 			<div id="rectangle"></div>
 		</div>
 		<style>
 			#container {
 				position: relative;
 				width: 100%;
 				height: 600px;
 				overflow: hidden;
 				background-color: #f0f0f0;
 			}
 			#rectangle {
 				position: absolute;
 				width: 200px;
 				height: 120px;
 				background-color: #3498db;
 				border-radius: 8px;
 				cursor: grab;
 				user-select: none;
 				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 				transform-origin: center;
 				transition: box-shadow 0.2s ease;
 			}
 			#rectangle:active {
 				cursor: grabbing;
 				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 			}
 		</style>
 		<script>
 			document.addEventListener("DOMContentLoaded", function () {
 				const rectangle = document.getElementById("rectangle");
 				const container = document.getElementById("container");
 				// Position and movement state
 				let isDragging = false;
 				let currentX = 50;
 				let currentY = 50;
 				let rotation = 0;
 				// Drag state tracking
 				let dragPointX = 0;
 				let dragPointY = 0;
 				let prevMouseX = 0;
 				let prevMouseY = 0;
 				// Physics constants
 				const friction = 0.95; // General friction (higher = less friction)
 				const rotationFactor = 0.1; // How much rotation is applied (lower = less rotation)
 				// Momentum tracking
 				let momentumX = 0;
 				let momentumY = 0;
 				let angularMomentum = 0;
 				let momentumAnimationId = null;
 				// Initialize position
 				setTransform(currentX, currentY, rotation);
 				function setTransform(x, y, rot) {
 					currentX = x;
 					currentY = y;
 					rotation = rot;
 					rectangle.style.transform = `translate(${x}px, ${y}px) rotate(${rot}deg)`;
 				}
 				function getRectCenter() {
 					const rect = rectangle.getBoundingClientRect();
 					return {
 						x: rect.left + rect.width / 2,
 						y: rect.top + rect.height / 2,
 					};
 				}
 				// Start dragging
 				rectangle.addEventListener("mousedown", dragStart);
 				rectangle.addEventListener("touchstart", dragStart, { passive: false });
 				function dragStart(e) {
 					e.preventDefault();
 					if (momentumAnimationId !== null) {
 						cancelAnimationFrame(momentumAnimationId);
 						momentumAnimationId = null;
 					}
 					// Get event coordinates
 					const eventX =
 						e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
 					const eventY =
 						e.type === "touchstart" ? e.touches[0].clientY : e.clientY;
 					// Record where on the card we're dragging from (relative to its center)
 					const center = getRectCenter();
 					dragPointX = eventX - center.x;
 					dragPointY = eventY - center.y;
 					// Initialize previous mouse position for momentum calculations
 					prevMouseX = eventX;
 					prevMouseY = eventY;
 					isDragging = true;
 					momentumX = 0;
 					momentumY = 0;
 					angularMomentum = 0;
 				}
 				// Drag movement
 				document.addEventListener("mousemove", drag);
 				document.addEventListener("touchmove", drag, { passive: false });
 				function drag(e) {
 					if (!isDragging) return;
 					e.preventDefault();
 					// Get event coordinates
 					const eventX =
 						e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
 					const eventY =
 						e.type === "touchmove" ? e.touches[0].clientY : e.clientY;
 					// Calculate movement delta
 					const dx = eventX - prevMouseX;
 					const dy = eventY - prevMouseY;
 					// Update position based on direct movement
 					const newX = currentX + dx;
 					const newY = currentY + dy;
 					// Calculate rotation based on the movement direction and drag point
 					// The further from center, the more leverage for rotation
 					const dragDistance = Math.sqrt(
 						dragPointX * dragPointX + dragPointY * dragPointY,
 					);
 					// Calculate the tangential component of movement
 					// We use the cross product to determine how much the movement is perpendicular to the radius
 					const tangentialForce =
 						(dx * dragPointY - dy * dragPointX) / (dragDistance || 1);
 					// Apply rotation with distance-based scaling
 					// This mimics the lever effect - further from center = more rotation
 					const rotationDelta =
 						tangentialForce * rotationFactor * (dragDistance / 100 + 0.5);
 					const newRotation = rotation + rotationDelta;
 					// Update momentum for after drag ends
 					momentumX = dx * 0.9; // Reduced to prevent excessive sliding
 					momentumY = dy * 0.9;
 					angularMomentum = rotationDelta * 0.9;
 					// Apply the transforms
 					setTransform(newX, newY, newRotation);
 					// Update previous mouse position
 					prevMouseX = eventX;
 					prevMouseY = eventY;
 				}
 				// End dragging
 				document.addEventListener("mouseup", dragEnd);
 				document.addEventListener("touchend", dragEnd);
 				function dragEnd() {
 					if (isDragging) {
 						isDragging = false;
 						applyMomentum();
 					}
 				}
 				// Apply momentum after release with friction
 				function applyMomentum() {
 					if (
 						Math.abs(momentumX) < 0.1 &&
 						Math.abs(momentumY) < 0.1 &&
 						Math.abs(angularMomentum) < 0.01
 					) {
 						momentumAnimationId = null;
 						return; // Stop if momentum is very small
 					}
 					// Apply friction
 					momentumX *= friction;
 					momentumY *= friction;
 					angularMomentum *= friction;
 					// Apply momentum
 					setTransform(
 						currentX + momentumX,
 						currentY + momentumY,
 						rotation + angularMomentum,
 					);
 					// Continue applying momentum
 					momentumAnimationId = requestAnimationFrame(applyMomentum);
 				}
 				// Handle edge cases
 				document.addEventListener("mouseleave", function () {
 					if (isDragging) {
 						isDragging = false;
 						applyMomentum();
 					}
 				});
 			});
 		</script>
 	</body>
 </html>