Wie kann ich die Größenänderung in Javascript implementieren?

Question

Ich weiß, dass jQuery und ähnliche Javascript-Frameworks Größe anpassen Funktionalität, aber ich möchte verstehen, wie es implementiert ist (wenn Sie nur mehr über Javascript erfahren).

Ich kann mir ein paar Wege vorstellen, wie es gemacht werden könnte, aber wie wird es in der Praxis umgesetzt? Das MouseOver-Ereignis wird auf ganze Elemente angewendet. Wie kann man also nur dann skalieren, wenn die Maus über die Kanten eines Elements bewegt wird?

Wenn es mehrere beliebte Möglichkeiten gibt, es zu implementieren, wie unterscheiden sie sich? Gibt es irgendwelche signifikanten Einschränkungen, dass Javascript vorläufig nicht funktionieren kann?

Antworten jeder Ebene des Details werden geschätzt. Auch wenn Sie mich zu relevanten Teilen des Framework-Quellcodes, in dem die "Magie" passiert, verweisen könnten, wäre das ebenfalls wünschenswert, aber nicht notwendig.

Answer 1

Tatsächlich sind die Größenänderungskanten separate Elemente, die Mausereignisse für die Größenänderung verarbeiten.

Das Erstellen eines Größenänderungsbereichs mit einfachem altem JavaScript wäre mühsam und wir müssen mehr Code für die Effekte schreiben, die mit einem Framework erreicht werden können.

Answer 2

Ich nahm mir die Zeit, um ein Beispiel für Sie zu schreiben. Es ist hier:

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

(. Hinweis: Dies wird wahrscheinlich nicht in allen Browsern funktionieren, da ich nicht die Zeit nehmen, hat, um sicherzustellen, war es Cross-Browser-kompatibel)

Im Grunde verwendet es das Ereignis mousemove, um zu überprüfen, wie weit der Cursor von den Kanten des Elements entfernt ist, und wenn es nahe genug an einer Kante ist, zeigen Sie einen Cursor für diese Kante an. Hier ist das JavaScript:

(Hinweis: In einem realen Projekt würden Sie dies sehr bzgl. Cross-Browser-Kompatibilität, Wartbarkeit und bessere Interaktion zwischen Bibliotheken codieren. Sie sollten ein Framework wie jQuery verwenden, da seine Entwickler haben dachte über all diese Dinge schon nach.)

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