Grafik soll nicht selektierbar sein

[Rolf B]

Hallo Felix,

kann aber nerven, wenn man eine Drag-Source verfehlt und dann an was anderem zupft (z.B. an einer Drag-Queen?).

user-select bezieht sich auf das Selektieren für copy+paste und hat mit drag+drop nichts zu tun, deswegen hilft das hier nicht.

Um Drag zu sperren, gibt es das HTML Attribut draggable="false".

Chrome bietet mit -webkit-user-drag eine CSS Alternative; wenn ich das richtig verstanden habe gibt's dazu keine CSS Variante bei Safari, FF oder Microsoft.

Als CSS-Alternative wird pointer-events: none genannt - bei mir hat das aber Drag nicht verhindert.

Als weitere Alternative wird genannt, das img mit einem div zu überlagern. Das geht - bei mir aber nur als echtes div, ein ::after Element per CSS hat nicht zuverlässig funktioniert. D.h. Du legst ein span um das Bild, das img und ein div hinein und stylest das aufwändig. Finde ich extrem hässlich.

Es gibt auch JavaScript-Lösungen; man kann sich auf das dragstart Event registrieren und dort preventDefault auf dem Event-Objekt aufrufen - oder einfach false zurückgeben. Das ist für einzelne Images gut praktikabel; mit Ausnutzung von bubbling und etwas Logik kann man es auch in einer einzelnen Registrierung abhandeln. Ganz heftige Lösungen blockieren bereits mousedown, aber das würde ich nicht tun wollen (und es mag ein drag+drop per touch nicht verhindern).

DuckDuckWent to this Fountain of Knowledge

Rolf