Breaking News: Grepper is joining You.com. Read the official announcement!

draggable and resizable div javascript

Shubham Kunwar answered on October 5, 2023 Popularity 3/10 Helpfulness 1/10

answer draggable and resizable div javascript

draggable and resizable div javascript

Comment

<!DOCTYPE html>
<html>
<head>
    <style>
        .draggable {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            position: absolute;
        }

        .resize-handle {
            width: 10px;
            height: 10px;
            background-color: darkblue;
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: se-resize;
        }
    </style>
</head>
<body>
    <div class="draggable" id="draggableDiv">
        <div class="resize-handle" id="resizeHandle"></div>
    </div>

    <script>
        const draggableDiv = document.getElementById("draggableDiv");
        const resizeHandle = document.getElementById("resizeHandle");

        let isResizing = false;
        let startX, startY, startWidth, startHeight;

        resizeHandle.addEventListener("mousedown", (e) => {
            isResizing = true;
            startX = e.clientX;
            startY = e.clientY;
            startWidth = draggableDiv.offsetWidth;
            startHeight = draggableDiv.offsetHeight;

            document.addEventListener("mousemove", resize);
            document.addEventListener("mouseup", stopResize);
        });

        function resize(e) {
            if (!isResizing) return;

            const width = startWidth + e.clientX - startX;
            const height = startHeight + e.clientY - startY;

            draggableDiv.style.width = `${width}px`;
            draggableDiv.style.height = `${height}px`;
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener("mousemove", resize);
            document.removeEventListener("mouseup", stopResize);
        }

        let isDragging = false;
        let offsetX, offsetY;

        draggableDiv.addEventListener("mousedown", (e) => {
            isDragging = true;
            offsetX = e.clientX - draggableDiv.getBoundingClientRect().left;
            offsetY = e.clientY - draggableDiv.getBoundingClientRect().top;

            document.addEventListener("mousemove", drag);
            document.addEventListener("mouseup", stopDrag);
        });

        function drag(e) {
            if (!isDragging) return;

            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;

            draggableDiv.style.left = `${x}px`;
            draggableDiv.style.top = `${y}px`;
        }

        function stopDrag() {
            isDragging = false;
            document.removeEventListener("mousemove", drag);
            document.removeEventListener("mouseup", stopDrag);
        }
    </script>
</body>
</html>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: draggable javascript resizable

Link to this answer
Share Copy Link

Contributed on Oct 05 2023

Shubham Kunwar

0 Answers Avg Quality 2/10

draggable and resizable div javascript

Contents

More Related Answers

draggable and resizable div javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.