CODEWITHSUNDEEP
javascript
javinladish
javinladish

Reputation: 1045

How can I disable image dragging on a <picture> element with Javascript?

I am unable to disable image dragging when using a <picture> element. I have used this in the past with an <img> element with success. I'm not sure why it doesn't work with <picture>.

HTML Code:

<picture class="thumb">
<source class="nodrag" srcset="image.webp" type="image/webp">
<source class="nodrag" srcset="image.gif" type="image/gif">
<img class="thumb" src="image.gif">
</picture>

My Javascript:

document.getElementsByClassName('thumb').ondragstart = function () { return false; };
document.getElementsByClassName('nodrag').ondragstart = function () { return false; };

The above did not work. Is there another way I can disable dragging of a element to prevent users from dragging to save the image?

Upvotes: 0

Views: 52

Answers (1)

Aib Syed
Aib Syed

Reputation: 3196

Not sure if it will work for your use-case but have you tried the HTML draggable attribute?

<img class="thumb" src="image.gif" draggable="false">

Upvotes: 1

Related Questions