drag element with mouse javascript

 <div class="container">
        <h1>DRAG ELEMENT</h1>
        <p class="subtitle">Click and drag the boxes around</p>
        
        <div class="drag-area" id="dragArea">
            <div class="draggable" style="left: 50px; top: 50px;">📦</div>
            <div class="draggable" style="left: 200px; top: 150px;">🎯</div>
            <div class="draggable" style="left: 400px; top: 80px;">⭐</div>
        </div>

        <p class="info">Drag and drop elements anywhere within the container</p>
    </div>  

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #8C92AC 0%, #6b7292 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow: hidden;
        }

        .container {
            text-align: center;
            color: white;
        }

        h1 {
            margin-bottom: 10px;
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 2px;
        }

        .subtitle {
            margin-bottom: 40px;
            opacity: 0.9;
            font-size: 0.9rem;
            font-weight: 300;
        }

        .drag-area {
            position: relative;
            width: 600px;
            height: 400px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 2px dashed rgba(255, 255, 255, 0.3);
            overflow: hidden;
        }

        .draggable {
            position: absolute;
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
            border-radius: 15px;
            cursor: grab;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            user-select: none;
        }

        .draggable:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

        .draggable.dragging {
            cursor: grabbing;
            transform: scale(1.1);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .info {
            margin-top: 30px;
            color: white;
            opacity: 0.8;
            font-size: 0.85rem;
        }

        @media (max-width: 650px) {
            .drag-area {
                width: 100%;
                height: 300px;
            }

            h1 {
                font-size: 1.5rem;
            }
        }

 const draggables = document.querySelectorAll('.draggable');
        const dragArea = document.getElementById('dragArea');

        draggables.forEach(draggable => {
            let isDragging = false;
            let currentX;
            let currentY;
            let initialX;
            let initialY;
            let xOffset = 0;
            let yOffset = 0;

            draggable.addEventListener('mousedown', dragStart);
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', dragEnd);

            // Touch events for mobile
            draggable.addEventListener('touchstart', dragStart);
            document.addEventListener('touchmove', drag);
            document.addEventListener('touchend', dragEnd);

            function dragStart(e) {
                if (e.type === 'touchstart') {
                    initialX = e.touches[0].clientX - xOffset;
                    initialY = e.touches[0].clientY - yOffset;
                } else {
                    initialX = e.clientX - xOffset;
                    initialY = e.clientY - yOffset;
                }

                if (e.target === draggable) {
                    isDragging = true;
                    draggable.classList.add('dragging');
                }
            }

            function drag(e) {
                if (isDragging) {
                    e.preventDefault();

                    if (e.type === 'touchmove') {
                        currentX = e.touches[0].clientX - initialX;
                        currentY = e.touches[0].clientY - initialY;
                    } else {
                        currentX = e.clientX - initialX;
                        currentY = e.clientY - initialY;
                    }

                    xOffset = currentX;
                    yOffset = currentY;

                    // Get boundaries
                    const rect = dragArea.getBoundingClientRect();
                    const elemRect = draggable.getBoundingClientRect();
                    
                    // Calculate max positions
                    const maxX = rect.width - draggable.offsetWidth;
                    const maxY = rect.height - draggable.offsetHeight;

                    // Constrain within boundaries
                    const constrainedX = Math.max(0, Math.min(currentX, maxX));
                    const constrainedY = Math.max(0, Math.min(currentY, maxY));

                    setTranslate(constrainedX, constrainedY, draggable);
                }
            }

            function dragEnd(e) {
                if (isDragging) {
                    initialX = currentX;
                    initialY = currentY;
                    isDragging = false;
                    draggable.classList.remove('dragging');
                }
            }

            function setTranslate(xPos, yPos, el) {
                el.style.left = xPos + 'px';
                el.style.top = yPos + 'px';
            }
        });