JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizable Div</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="resizable" class="resizable">
        <div id="resizer" class="resizer"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.resizable {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: relative;
}

.resizer {
    width: 10px;
    height: 10px;
    background-color: darkblue;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize; /* South East resize cursor */
}

JavaScript

const resizable = document.getElementById('resizable');
const resizer = document.getElementById('resizer');

let isResizing = false;
let isDragging = false;
let lastX, lastY;

// Handle resizing
resizer.addEventListener('mousedown', function(e) {
    e.preventDefault();
    isResizing = true;
    
    window.addEventListener('mousemove', resize);
    window.addEventListener('mouseup', stopResize);
});

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

    let newWidth = e.clientX - resizable.offsetLeft;
    let newHeight = e.clientY - resizable.offsetTop;

    // Prevent resizing to negative dimensions
    newWidth = Math.max(newWidth, 50); // Minimum width
    newHeight = Math.max(newHeight, 50); // Minimum height

    resizable.style.width = `${newWidth}px`;
    resizable.style.height = `${newHeight}px`;
}

function stopResize() {
    isResizing = false;
    window.removeEventListener('mousemove', resize);
}


let offset, offsety;

function move(e) {
// Update div position based on new cursor position
resizable.style.left = `${e.clientX - offsetX}pĂ—`;
resizable.style.top = `${e.clienty - offsetY}px`;
console.log(offsetX);
}


resizable.addEventListener("mousedown", (e) => {
// Calculate the initial offset values
    offsetX = e.clientX - resizable.offsetLeft;
    offsetY = e.clientY - resizable.offsetTop;
    
    document.addEventListener ("mousemove", move);
});


document.addEventListener("mouseup", () => {
   document.removeEventListener("mousemove", move)
});


// Handle dragging
/* resizable.addEventListener('mousedown', function(e) {
    if (e.target === resizer) return; // Prevent drag when resizing

    e.preventDefault();
    isDragging = true;

    lastX = e.clientX;
    lastY = e.clientY;

    window.addEventListener('mousemove', drag);
    window.addEventListener('mouseup', stopDrag);
});

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

    const dx = e.clientX - lastX;
    const dy = e.clientY - lastY;

    const rect =...