Comment puis-je implémenter le redimensionnement en Javascript ?

Question

Je sais que jQuery et d'autres frameworks Javascript similaires offrent une fonctionnalité de redimensionnement, mais je veux comprendre comment elle est mise en œuvre (ne serait-ce que pour en savoir plus sur Javascript).

Je peux penser à quelques façons de le faire, mais comment cela est-il mis en œuvre dans la pratique ? L'événement mouseover s'applique à des éléments entiers, alors comment permettre le redimensionnement uniquement lorsque la souris survole les bords d'un élément ?

S'il existe plusieurs façons populaires de la mettre en œuvre, en quoi diffèrent-elles ? Y a-t-il des limitations importantes que Javascript ne peut pas contourner pour le moment ?

Les réponses, quel que soit leur niveau de détail, sont appréciées. De même, si vous pouviez me diriger vers les parties pertinentes du code source du framework où la "magie" se produit, ce serait également apprécié, mais pas nécessaire.

Answer 1

J'ai pris le temps d'écrire un exemple pour vous. Il est ici :

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

(Note : Ceci ne fonctionnera probablement pas dans tous les navigateurs puisque je n'ai pas pris le temps de m'assurer de la compatibilité entre navigateurs).

En gros, ce qu'il fait, c'est qu'il utilise la fonction mousemove pour vérifier la distance entre le curseur et les bords de l'élément et, s'il est suffisamment proche d'un bord, afficher un curseur pour ce bord. Voici le JavaScript :

(Remarque : dans un projet réel, le code serait très différent pour des raisons de compatibilité entre navigateurs, de maintenabilité et de meilleure interaction entre les bibliothèques. Vous devriez utiliser un framework tel que jQuery puisque ses développeurs ont déjà pensé à toutes ces choses).

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

En fait, les bords de redimensionnement sont des éléments séparés qui gèrent les événements de souris pour le redimensionnement.

La création d'une zone de redimensionnement à l'aide d'un simple JavaScript serait fastidieuse et nous devrions écrire davantage de code pour les effets qui peuvent être obtenus à l'aide d'un framework.