Grafik soll nicht selektierbar sein

[piet]

Hallo,

ich habe auf der Webseite Grafiken eingefügt. Um diese nicht zu selektieren habe ich als css Code

* {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
}

eingefügt. Trotzdem kann ich die Grafiken selektieren und "verschieben". Die Grafiken springen natürlich wieder an die Ausgangsposition zurück, das möchte ich aber trotzdem verhindern.

Die Grafiken sind

<IMG src="gif/hintergrund/rrm.gif" border="0" style="position:absolute; top:200; left:280; width:1000px; height:570px;">
<IMG src="gif/hintergrund/stt.gif" border="0" style="position:absolute; top:450; left:1; width:350px; height:320px;">

so eingefügt.

Wie kann ich verhindern das die Grafiken selektiert werden können. So damit Sie nicht von einer zittrigen Hand ;-) "verschoben" werden können ?

Gruß henry

[Felix Riesterer]

Lieber piet,

Wie kann ich verhindern das die Grafiken selektiert werden können. So damit Sie nicht von einer zittrigen Hand ;-) "verschoben" werden können ?

warum sollte das ein Problem sein und Dich kümmern? Grafiken zu verschieben ist ein Bestandteil des Drag&Drop-Prinzips auf Desktop-Systemen. Das ist schon gut und richtig so.

Liebe Grüße,

Felix Riesterer.

[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

[beatovich]

hallo

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

Das war wohl deine Drag-Queen (Firefox)

[Rolf B]

Hallo beatovich,

hm, draggable ist im MDN als "seit Urzeiten von FF unterstützt" eingetragen, darum habe ich das mit FF gar nicht getestet - aber du hast recht, das ist nur Verkleidung. Funktioniert nicht. (FF 52esr)

ondragstart="return false;" ist besser.

Am bessersten wird aber wohl Andreas' Idee des Hintergrundbildes sein, da muss man gar nichts tun (nur die Größe setzen)

Rolf

[JürgenB]

Hallo,

welches Problem willst du wirklich beseitigen? Warum glaubst du, dass Besucher, möglicherweise auch mit zittriger Hand, auf deine Bilder klicken? Und warum glaubst du, das sie mit diesem auch auf anderen Seiten vorhandenem Verlalten der Bilder ein Problem haben?

Gruß
Jürgen

[MudGuard]

Hi,

<IMG src="gif/hintergrund/rrm.gif" border="0" style="position:absolute; top:200; left:280; width:1000px; height:570px;">
<IMG src="gif/hintergrund/stt.gif" border="0" style="position:absolute; top:450; left:1; width:350px; height:320px;">

Dr Pfad der Bilder deutet darauf hin, daß das eigentlich gar keine img-Elemente sein sollten, sondern per CSS eingefügte Hintergrundbilder. Damit würde sich dann das Drag-Problem vermutlich auch erledigen.

cu,
Andreas a/k/a MudGuard