Wie erstelle ich skalierbare HTML-Elemente mit reinem JavaScript?

Anpassbare HTML-Elemente mit reinem JavaScript erstellen

Es gibt zahlreiche Bibliotheken, um die Größenänderung von Elementen zu ermöglichen, aber für diejenigen, die eine reine JavaScript-Lösung suchen, gibt es Folgendes Schritte können verwendet werden:

1. Ereignis-Listener: Hängen Sie ein Klickereignis an Listener auf das gewünschte HTML-Element. Dadurch wird der Größenänderungsprozess eingeleitet.
2. Klassenzusatz: Fügen Sie dem Element eine CSS-Klasse hinzu, z. B. „resizable“, um visuell anzuzeigen, dass es in den Größenänderungsmodus gewechselt ist.
3. Resizer-Element-Erstellung: Erstellen Sie ein neues HTML-Element, z. B. ein
   , und weisen Sie ihm die Klasse zu „Resizer.“ Dieses Element dient als Ziehgriff.
4. Ereignis-Listener für Resizer: Fügen Sie dem Resizer einen Mousedown-Ereignis-Listener hinzu, der den Start des Ziehvorgangs auslöst.
5. Drag-Initiierung: Speichern Sie die anfängliche Mausposition und die Elementabmessungen und ändern Sie die Größe Element.
6. Drag-Funktion: Fügen Sie dem Dokument einen Mousemove-Ereignis-Listener hinzu, um die Abmessungen des Elements zu aktualisieren, wenn die Maus bewegt wird.
7. Drag-Beendigung: Entfernen Sie beim Mouseup die Ereignis-Listener „Mousemove“ und „Mouseup“, um die Größenänderung abzuschließen Prozess.

Hier ist ein Beispielcode-Snippet, das diesen Ansatz implementiert:

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

Beachten Sie, dass dieser Ansatz möglicherweise nicht mit allen Browsern und Internet Explorer niedrigeren Versionen kompatibel ist Es ist insbesondere bekannt, dass es bei Nr. 9 Probleme gibt.