However, we cannot directly hook the handler function to the mousemove event in document.body, because it has a pre-condition, that is we need to firstly perform mousedown event, which is when the user click the mouse and start to drag. We need to be careful on what behaviour should be performed when a certain type of mouse event is occurred.įor example, in the initial drawing phase, we need to utilise mousemove event to handle the div box resizing when dragging it.

The headache point in this demo is definitely to handle the mouse events manually. And from this line, you can do some calculations and find out the position of the div box and its width and height.Īs illustrated in the following diagram, point start and point end both has individual information of cursor events with their x and y values.Īssume point start is (X1, Y1) and point end is (X2, Y2).Īnd then, all you have to do is just applying these numbers to the respective CSS styles of the div. Then, the straight line between the 2 points is how your mouse has moved. Hence, there are 2 points, the first point being the point where you hit the mouse and the second point being the point where you release the mouse.

To draw a resizable box, you need to do a mouse click firstly, move the mouse without releasing it, and lastly release the mouse in the end. Well, this is a simple math implementation here. There are some concepts behind this demo, which I would like to mention Determine The Position of the Box I created this Demo project simply because I wanted to explore how to achieve this effects purely by manipulating with different div elements and event listeners. It uses vanilla TypeScript (or removing those types to be JavaScript).

Recently, I have created a Demo Project, which demonstrates how to create a resizable div box by using mouse clicking and dragging.

Resizable javascript