So deaktivieren Sie das Ziehen in CSS

CSS ohne Ziehen

CSS ist eines der wichtigen Werkzeuge zum Entwerfen des Webseitenlayouts und verfügt über viele Eigenschaften, die Ihre Designideen perfekt ergänzen können. Dies ist in manchen Fällen nützlich, wenn Elemente auf einer Webseite gezogen werden können, aber manchmal ist es nicht das, was wir wollen. Wenn Sie eine Website entwickeln und möchten, dass bestimmte Elemente nicht zerlegbar sind, sind Sie bei uns genau richtig. In diesem Artikel erfahren Sie, wie Sie das Ziehen bestimmter Elemente mithilfe von CSS deaktivieren.

Das Ziehen von Bildern deaktivieren

Erstens lernen wir, wie man das Ziehen von Bildern deaktiviert. Dies wird normalerweise verwendet, wenn wir die Bildgröße oder -position korrigieren müssen, um Fehler zu vermeiden. Der Code in CSS zum Deaktivieren ziehbarer Bilder ist sehr einfach. Sie müssen lediglich das ziehbare Attribut des Elements auf false setzen:

img {
    draggable: false;
}

Dadurch wird verhindert, dass Benutzer Bilder durch Ziehen verschieben oder kopieren.

Das Ziehen von Text deaktivieren

Das Deaktivieren des Ziehens von Text ist ebenfalls eine häufige Anfrage. In manchen Fällen möchten wir möglicherweise verhindern, dass der Benutzer einen bestimmten Text auswählt oder in die Zwischenablage kopiert. Um die Texteigenschaft eines Elements nicht ziehbar zu machen, können wir die CSS-Eigenschaft user-select verwenden und ihren Wert auf „none“ setzen:

span {
    user-select: none;
}

Dadurch wird verhindert, dass der Benutzer den angegebenen Text auswählt und kopiert. Beachten Sie jedoch, dass es Benutzer nicht daran hindert, mithilfe von Tastaturkürzeln (z. B. Strg+C oder Befehl+C) zu kopieren. Wenn Sie das Kopieren verhindern möchten, müssen Sie andere Techniken verwenden.

Elementziehen deaktivieren

Manchmal möchten wir möglicherweise verhindern, dass bestimmte Elemente auf die Seite gezogen werden. Dies kann erreicht werden, indem die Draggable-Eigenschaft des Elements in CSS auf „false“ gesetzt wird:

div {
    draggable: false;
}

Auf diese Weise kann der Benutzer das Element nicht an eine neue Position ziehen.

Wenn Sie gleichzeitig verhindern möchten, dass ein Element der gesamten Seite gezogen wird, können Sie das Draggable-Attribut des Body-Elements auf „false“ setzen:

body {
    draggable: false;
}

Dadurch wird verhindert, dass die gesamte Seite gezogen wird, egal welches Element gezogen wird.

Linkziehen deaktivieren

In einigen Fällen müssen wir Benutzern möglicherweise verbieten, bestimmte Links in neue Tabs oder neue Fenster zu ziehen. Das Deaktivieren des Ziehens von Links kann mit dem folgenden Code in CSS erreicht werden:

a {
    draggable: false;
}

Auf diese Weise kann der Benutzer, wenn er versucht, den Link zu ziehen, ihn nicht in einen neuen Tab oder ein neues Fenster verschieben.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man das Ziehen bestimmter Elemente mithilfe von CSS deaktiviert. Wir haben gelernt, wie man das Ziehen von Bildern, das Ziehen von Text, das Ziehen ganzer Elemente und das Ziehen von Links deaktiviert. Unabhängig davon, ob Sie die Leistungsfähigkeit von CSS nutzen oder Ihre Website vor versehentlichen Änderungen durch Benutzer schützen möchten, ermöglichen Ihnen diese Techniken eine komfortable Einrichtung.

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie das Ziehen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!