How can I implement resizing in Javascript?

Question

I know that jQuery and similar Javascript frameworks offer resize functionality, but I want to understand how it's implemented (if only to learn more about Javascript).

I can think of a few ways it could be done, but how is it implemented in practice? The mouseover event applies to entire elements, so how does one allow resizing only when the mouse hovers over the edges of an element?

If there are several popular ways to implement it, how do they differ? Are there any significant limitations that Javascript just can't work around for the time being?

Answers of any level of detail are appreciated. Also, if you could direct me to relevant parts of framework source code where the "magic" happens, that would be appreciated as well, but not necessary.

Answer 1

Actually the resize edges are separate elements that handles mouse events for resizing.

Creating a resize area using plain old JavaScript would be tiresome and we will have to write more code for the effects that can be achieved using a framework.

Answer 2

I took the time to write an example for you. It's here:

http://blixt.org/js/resize.html

(Note: This will probably not work in all browsers since I didn't take the time to make sure it was cross-browser compatible.)

Basically what it does is that it uses the mousemove event to check how far the cursor is from the edges of the element, and if it is close enough to an edge, show a cursor for that edge. Here's the JavaScript:

(Note: In a real project, you would code this very differently for the sake of cross-browser compatability, maintainability and better interaction between libraries. You should use a framework such as jQuery since its developers have thought about all these things already.)

var r = document.getElementById('resizable');
r.onmousemove = function (e) {
    if (!e) e = window.event;

    var
    // Get the distances to all the edges.
    // e.clientX is the X coordinate on the client area (window) of the mouse.
    // r.offsetLeft is the horizontal offset from the page left.
    // r.offsetWidth is the total width of the element.
    left = e.clientX - r.offsetLeft, top = e.clientY - r.offsetTop,
    bottom = r.offsetHeight - top, right = r.offsetWidth - left,
    // Get the shortest distance to any of the edges.
    min = Math.min(Math.min(Math.min(top, left), bottom), right);

    // If the pointer is further than 5 pixels from an edge, do not display
    // any resize cursor.
    if (min > 5) {
        r.style.cursor = 'default';
        return;
    }

    // Determine which cursor to display.
    switch (min) {
        case top:
            r.style.cursor = 'n-resize';
            break;
        case left:
            r.style.cursor = 'w-resize';
            break;
        case bottom:
            r.style.cursor = 's-resize';
            break;
        case right:
            r.style.cursor = 'e-resize';
            break;
    }
}