JS resizable div

Question

I would like to create div element which behaves similar to clicking and dragging on Windows desktop.

So far I my code does the following:

We create (just changing CSS styling of display:none to display:block) a `div` when the page detects a mousedown
If the user moves the mouse while still mousing down, they modify the size of the div.
When the user releases the mouse button, we hide the div (display:none)

My problem is the resize part. Right now, the div can be expanded in a South East direction only.

Refer to this Fiddle an example.

Play around with the Fiddle example to see what I mean (you cannot expand vertically beyond origin, for example).

The reason, I assume, is becuase newX and newY are negative values. How can I solve this?

You might want to start here https://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript — luenib, Sep 07 '18 at 02:42
Possible duplicate of [How to make HTML element resizable using pure javascript?](https://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript) — Abana Clara, Sep 07 '18 at 03:19

score 1 · Accepted Answer · answered Sep 13 '18 at 03:47

You haven't consider the case where mouse move coordinates are less than the drawing start coordinates, I have modified the JS code a bit,

var clientBox = document.getElementById("userBox");
var startX, startY, currentX, curentY;

function initRect(event) {
    startX = event.clientX;
    startY = event.clientY;
    window.addEventListener("mousemove", drawRect);
    window.addEventListener("mouseup", dstryRect);

}

function drawRect(event) {
    var width = event.clientX-startX;
    var height = event.clientY-startY;
    var x = startX;
    var y = startY;
    if (width < 0) {
        x = startX + width;
        width=-width;
    }
    if (height < 0) {
        y = startY + height;
        height = -height;
    }
    clientBox.style.display = "block";   // Hideen until click detected
    clientBox.style.top  = y + "px";
    clientBox.style.left = x + "px";
    clientBox.style.width = width + "px";
    clientBox.style.height = height + "px";
}

function dstryRect() {
    window.removeEventListener("mousemove", drawRect);
    window.removeEventListener("mouseup", dstryRect);
    clientBox.style.display = "none";
    clientBox.style.height = "0px";
    clientBox.style.width = "0px";
}

just update these chnages in JS file and you are done. Here is the working fiddle Thanks.

This solution works great, but could you explain how it works please. Also note that you never used your declared variables named `currentX` and `currentY` ;) — Flame Stinger, Sep 13 '18 at 23:19
@FlameStinger My mistake, the variable currentX and currentY are declared for current mouse position, but I used directly the event.clientX and event.clientY, so you can remove these two declarations. — Suhas Bhattu, Sep 14 '18 at 05:52
And about the code, the startX and startY stores the starting X and Y when mouseDown occurs, and during mouseMove, it compare the current x and y with the starting x and y and decides is it just moving in NW, NE, SE or SW direction, and then if height and width is calculated and check its negative, if yes then change the top and left the rectangle to the currentx and current y and negate the height and width. — Suhas Bhattu, Sep 14 '18 at 06:10

JS resizable div

1 Answers1