HTML verbietet das Ziehen

Im Webdesign war HTML (Hypertext Markup Language) schon immer ein sehr wichtiger Bestandteil. Es ermöglicht Entwicklern, Webinhalte zu erstellen und darzustellen, sie zu teilen und im Internet darauf zuzugreifen. Bei der tatsächlichen Webentwicklung können jedoch bestimmte Elemente oder Attribute in HTML zu nachteiligen Auswirkungen und Problemen bei der Benutzererfahrung führen. Ein offensichtliches Beispiel ist das Ziehen von Elementen. Tatsächlich bietet HTML eine Möglichkeit, dieses Ziehverhalten zu deaktivieren und so das Benutzererlebnis und die Seitensicherheit zu verbessern.

Warum das Ziehen von HTML-Elementen deaktivieren?

In HTML können einige Elemente (wie , , usw.) durch Ziehen mit der Maus verschoben werden. Obwohl das Ziehen von Elementen den Benutzern bequeme Vorgänge ermöglichen kann, kann es manchmal zu Problemen führen, z. B. zu Fehlern beim Ziehen, versehentlichem Verschieben oder Löschen wichtiger Elemente, was sich auf das Layout der Webseite auswirkt und auch zum Verlust von Kreditkarteninformationen führen kann und persönliche Informationen.

Andererseits zeigen einige Schadprogramme (z. B. Phishing und betrügerische Werbung) Benutzern falsche Inhalte an, indem sie die Drag-Funktion von HTML-Elementen nutzen und Benutzer zum Klicken verleiten, was zu Datenverlust führt und die Sicherheit der Benutzer gefährdet. Daher kann die Deaktivierung des Ziehverhaltens von HTML-Elementen in manchen Fällen die Sicherheit und das Benutzererlebnis der Seite gewährleisten.

Wie deaktiviere ich das Ziehen von HTML-Elementen?

In HTML können Sie über das „dragable“-Attribut steuern, ob ein Element gezogen werden kann. Der Standardwert dieses Attributs ist „auto“, was bedeutet, dass das Element gezogen werden kann. Das Ziehen von Elementen kann jedoch deaktiviert werden, indem das Attribut „draggable“ auf „false“ gesetzt wird.

Das folgende Codebeispiel zeigt, wie das „draggable“-Attribut verwendet wird:

<img src="example.png" draggable="false">

<a href="example.com" draggable="false">example</a>

<input type="text" value="example" draggable="false">

Im obigen Beispielcode wird der Wert des „draggable“-Attributs auf „false“ gesetzt und auf , und <. angewendet ;input> Auf diese Weise werden diese Elemente nicht mehr gezogen.

Sie können das Ziehen für alle Elemente auf der gesamten Seite über CSS deaktivieren, wie unten gezeigt:

* {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
}

Im obigen Code wird das Ziehen mit dem CSS-Attribut „user-drag“ und dem Browser-Präfix für alle Elemente deaktiviert.