Как я могу реализовать изменение размера в Javascript?

Question

Я знаю, что jQuery и аналогичные платформы Javascript предлагают функцию изменения размера, но я хочу понять, как она реализована (хотя бы для того, чтобы узнать больше о Javascript).

Я могу придумать несколько способов, как это можно сделать, но как это реализуется на практике? Событие mouseover применяется ко всем элементам, так как можно разрешить изменение размера только тогда, когда мышь наведена на края элемента?

Если есть несколько популярных способов его реализации, чем они отличаются? Существуют ли какие-либо существенные ограничения, которые Javascript просто не может обойти в настоящее время?

Ответы любого уровня детализации приветствуются. Кроме того, если бы вы могли направить меня к соответствующим частям исходного кода фреймворка, где происходит «волшебство», это также было бы полезно, но не обязательно.

Answer 1

Я нашел время, чтобы написать пример для вас. Это здесь:

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

(Примечание: это, вероятно, не будет работать во всех браузерах, так как я не потратил время на то, чтобы убедиться, что он совместим с разными браузерами.)

По сути, он использует событие mousemove, чтобы проверить, как далеко находится курсор от краев элемента, и, если он достаточно близко к краю, показать курсор для этого края. Вот код JavaScript:

(Примечание: в реальном проекте вы бы кодировали это совсем по-другому для совместимости между браузерами, удобства сопровождения и лучшего взаимодействия между библиотеками. Вы должны использовать такую ​​среду, как jQuery , поскольку ее разработчики уже думал обо всем этом.)

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;
    }
}

Answer 2

На самом деле края изменения размера - это отдельные элементы, которые обрабатывают события мыши для изменения размера.

Создание области изменения размера с использованием простого старого JavaScript будет утомительным, и нам придется написать больше кода для эффектов, которые могут быть достигнуты с помощью фреймворка.