Make elements undraggable through CSS?

[hubertgk]

Hi,

Is there a way to make certain elements undraggable through CSS?

I've so far tried wrapping an image element within a <span> element with a CSS class pointing to the below code but the image was still draggable. Is there a simple way that works?

.undraggable {
    user-drag: none;
    -webkit-user-select: none; /* Safari, Chrome */
    -webkit-user-drag: none;
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE */
    user-select: none; /* CSS3 */
}

<span class="undraggable">[img width=32 [image.svg]]</span>

[Eric Shulman]

You were VERY close!

You need to specify that the rule applies to the "img" element WITHIN the "undraggable" class wrapper.  Thus:

.undraggable img { ... }

then, 

<span class="undraggable">[img width=32 [image.svg]]</span>

will work as you intend.

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)
InsideTiddlyWiki: The Missing Manuals

 

[hubertgk]

Thanks Eric. For some strange reason this still does not work. I'm on FF 60.0.2.

Here's my code in full:

The element in wikitext:

<span class="undraggable">[img width=32 [warning.svg]]</span>

CSS:

.undraggable img {

    user-drag: none;
    -webkit-user-select: none; /* Safari, Chrome */
    -webkit-user-drag: none;
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE */
    user-select: none; /* CSS3 */
}

Thanks!

[hubertgk]

OK, I've checked in Chrome and it works as expected.

Still no luck on Firefox though. From what I've gathered online, this might be a FF bug because the correct implementation for FF appears well documented otherwise.

Thanks again!