So machen Sie ein HTML5 -Element, das resizierbar ist

Um die HTML5 -Elemente zu verdeutlichen, kann die Verwendung des Größenattributs von CSS einfache manuelle Anpassungen erreichen, während die Verwendung von JavaScript- oder dedizierten Bibliotheken komplexere Steuerelemente erreichen kann. Insbesondere muss die CSS-Methode nicht sichtbar und die Größe des Überlaufs festlegen und die Größe anwenden: Beide, die für Szenarien wie Textbereiche geeignet sind. JavaScript kann eine benutzerdefinierte Anpassungslogik erreichen, indem Mausereignisse anhören. Interact.js und andere Bibliotheken bieten fortschrittliche Funktionen wie Trägheit und Adsorption. Daher wird für einfache Bedürfnisse die CSS -Änderung empfohlen. Es wird empfohlen, JavaScript oder Interact.js und andere Bibliotheken zu verwenden, um die Entwicklungseffizienz und die funktionale Integrität in komplexen Szenarien zu verbessern.

Um ein HTML5 -Element zu machen, haben Sie einige Optionen, je nachdem, ob der Benutzer es manuell oder über Code ändern soll. Hier erfahren Sie, wie Sie beide Szenarien mit dem Fokus auf praktische Cross-Browser-Lösungen konzentrieren können.

Verwenden von CSS- resize (einfach und integriert)

Der einfachste Weg, um ein vom Benutzer vermehrter Element zu machen, ist die Verwendung der CSS resize . Dies funktioniert auf Elementen, die über overflow auf etwas anderes als visible .

 .Resizable {
  Breite: 200px;
  Höhe: 100px;
  Überlauf: Auto; / * Erforderlich für die Größe der Größe zur Arbeit */
  Größenänderung: beides; / * Kann 'horizontal', 'vertikal' oder 'beides' */sein
  Grenze: 1PX Solid #CCC;
}

 <div class = "resizable">
  Größen Sie die Größe, indem Sie die Ecke ziehen!
</div>

Anmerkungen:

• Funktioniert nur auf Block-Ebene.
• Das Element muss overflow nicht auf visible eingestellt haben.
• Ein visuelles Größengriff (normalerweise ein Dreieck oder Griff) erscheint in der unteren rechten Ecke.
• In allen modernen Browsern unterstützt.

Dies ist perfekt für Textbereich oder inhaltlich-edierbare Bereiche, in denen Sie eine einfache Benutzergrößenänderung wünschen.

Machen Sie ein Element dragabel und mit JavaScript zu setzbar

Wenn Sie mehr Kontrolle benötigen - wie beispielsweise ein div -Resizing mit benutzerdefinierten Handles oder Einschränkungs -Seitenverhältnissen -, benötigen Sie JavaScript.

Hier ist ein minimales Beispiel dafür, dass ein div resizierbar unter Verwendung eines benutzerdefinierten Boden-Rechts-Griffs:

 <div id = "resizable-box" style = "width: 200px; Höhe: 100px; Hintergrund: #eee; Position: Relativ; Rand: 1PX Solid #999;">
  <div id = "Größen Sie den Griff" style = "width: 10px; Höhe: 10px; Hintergrund: #333; Position: absolut; unten: 0; rechts: 0; Cursor: se-resize;"> </div>
</div>

 const box = document.getElementById ('Resizable-Box');
const handle = document.getElementById ('Größe des Größengriffs');

lass isResizing = false;

Handle.AdDeVentListener ('MouseDown', (e) => {
  isResizing = wahr;
  E.PreventDefault ();
});

window.addeventListener ('Mousemove', (e) => {
  if (! isResizing) kehren Sie zurück;

  const dx = e.clientx - box.getBoundingClientRect (). Right;
  const dy = e.clienty - box.getBoundingClientRect (). unten;

  const newwidth = math.max (50, box.Offsetwidth dx);
  const newheight = Math.max (50, Box.Offseteight Dy);

  box.style.width = newwidth 'px';
  Box.Style.Height = newHeight 'px';
});

window.adDeVentListener ('mauseup', () => {
  isResizing = false;
});

Schlüsselpunkte:

• Verwenden Sie getBoundingClientRect() , um die aktuelle Position zu erhalten.
• Aktualisieren Sie width und height direkt über style .
• Verhindern, dass die Größe zu klein mit Math.max() .
• Der se-resize Cursor gibt einen Standard-Diagnose-Größenindikator an.

Bibliotheken für fortschrittliche Anwendungsfälle

Für komplexe Schnittstellen (wie Dashboards oder UI -Bauherren) sollten Sie Bibliotheken verwenden:

• Interact.js - leistungsstarke, leichte Bibliothek für Drag, Drop und Größenänderung.
• Resizierbar DOM (von Shopify) -reagiert ausgerichtet, aber an anderer Stelle verwendbar.
• JQuery UI Resicable - Wenn Sie bereits die Jquery UI verwenden.

Beispiel mit Interact.js :

 <script src = "https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"> </script>

<div id = "draggable-resize" class = "resize containerer">
  <p> resizierbar mit interact.js </p>
</div>

 .Resize-Container {
  Breite: 200px;
  Höhe: 150px;
  Hintergrund: #f0f0f0;
  Grenze: 1PX Solid #CCC;
  Polsterung: 10px;
}

 interagieren ('. Größenreside-Container')
  .Resizable ({{
    Kanten: {unten: RECHT, Rechts: TRUE},
    Trägheit: wahr,
  })
  .on ('Resizemove', Funktion (Ereignis) {
    const target = event.target;
    target.style.width = event.Rect.width 'px';
    target.style.height = event.Rect.Height 'px';
  });

Dies gibt Ihnen Trägheit, Einschränkungen, Snap-to-Grid und mehr mit minimalem Code.

Grundsätzlich verwenden Sie resize: both in CSS für einfache Fälle. Für die volle Kontrolle gehen Sie mit JavaScript oder einer Bibliothek wie interact.js. Die manuelle Methode gibt Lernwert, aber Bibliotheken sparen Zeit in der Produktion.

Das obige ist der detaillierte Inhalt vonSo machen Sie ein HTML5 -Element, das resizierbar ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!