Can I disable viewers 'dragging and dropping' my jpeg images onto their desktop?

Hi there,

Can I disable viewers 'dragging and dropping' my jpeg images onto their desktop?

I have already implemented code to disable right click (below) --->

<script src="http://ajax.googleapis.com/ajax/libs/jquery /1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script>

Is there code that will stop users dragging and dropping images aswell or can the above code be altered? I have seen this done on other sites that use HTML.

Many thanks

You can probably just use the same preventDefault technique on events other than just "contextmenu":E.g. for drag:

$(this).bind("ondragstart", function(e) { e.preventDefault(); });
$(this).bind("drag", function(e) { e.preventDefault(); });

This would also disable dragging for other purposes, it's probably best to just target img tags with your event handlers, like so:

$("img").bind...

Nevertheless, someone could easily go into the HTML inspector and pull out your image out of the page. You can't prevent a developer or someone determined from snagging the image.

Try this in custom CSS.

img {
 pointer-events: none;
}

@foleyatwork: that is a pretty slick option to prevent dragging images off to save, and it also appears to work at preventing 'right-click + save as'? However, it only seems to work on our full-screen images, and not on our gallery thumbnail grid images. (as seen here: http://fameparties.com/becca-katzmann-atlanta/ ) Is there a way to amend the code to prevent the 'right click + save as' on our gallery thumbnail images?

thanks!

Apparently it's not supported in Internet Explorer.

Just as easy to hit shift-command-control-4 (mac) and capture the image. You can't stop people from taking an image if they want it.

Very true, to an extent. The amount of people I have had to tell how to take a screen shot vs. the amount of people I had to tell how to save an image from a website is quite different. I know we can't cover all bases, but if we can protect a few from the screenshot challenged then I am fine with that.

You're right, it's not supported in IE. Technically speaking, there is absolutely no possible way to prevent people from stealing the photos posted on your site. The best you can do is make it inconvenient for them. This isn't a Squarespace-specific problem, it's just how the Internet works.

The technique I posted doesn't work on gallery images because you need pointer events to increment the slides.

A watermark is the only surefire way to protect photos. Kind of lame, but it's effective.

If I have some more time I'll try and come up with a more robust solution.

Hey I just used this to solve the drag and drop problem but now that exact text is showing up on my site and I can't get rid of it. Help! www.kaylinngilstrap.com

My guess is you added it to code injection. Login, click on the wrench, then find the code injection tab and delete the code.

This is supposed to go in custom CSS. Instructions here: http://help.squarespace.com/customer/portal/articles/438114-making-style-changes#css-editor--optional-

Nope wasn't it but I figured it out. I did some other dumb thing. Thanks for posting this answer. Know there's no perfect fix but not making it super ease for people to copy images is step one.

I have my images in Image Blocks as I prefer this look over the galleries.

• Add an Image Block
• Scroll down in the options and there is a clickthrough link, add an external link (I have mine set to my blog)
• Anytime anyone right clicks or clicks my images it directs them to my blog. If they right click and save what actually gets saved is an HTML file that when opened leads right to my blog.

I hope this helps.

Is it possible to disable on mobile device as well? I was able to disable both right click and drag drop, but I found that on mobile the images can easily be downloaded. Thanks in advance.

You might need to put the code in the header under code injection section: No right-click script.

Where do you implement the code to prevent right clicking?

I tried inserting it into the header in code injection and cannot seem to disable the right click function. Any help would be appreciated!

Unfortunately this method creates an annoying conflict at the image slideshows. On Firefox at least, when someone clicks to see the next photo, a transparent blue color fills the photo and they have to press it again to see the next one or just use the arrows on the left and on the right.

You’re worrying about the wrong thing…
Bugging out: How rampant online piracy squashed one insect photographer
Most copyright holders are individuals; most infringers are businesses.

You’re worrying about the wrong thing…
Bugging out: How rampant online piracy squashed one insect photographer
Most copyright holders are individuals; most infringers are businesses.

You’re worrying about the wrong thing…
Bugging out: How rampant online piracy squashed one insect photographer
Most copyright holders are individuals; most infringers are businesses.

This worked for me. Header or footer box should work the same..

<BODY onselectstart="return false;" ondragstart="return false;">

Hello world. I found this out there. I believe its from two sources, I do not recall where exactly, but i love it! Special Thanks to those coding geniuses out there!

This cleanly disables drag and drop of images and disables the right click over all images.

Simply place this in your main CODE INJECTION under HEADER. Save it and your done!

<HTML>
 <HEAD></HEAD>
 <BODY on contextmenu="return false;" onselectstart="return false;" ondragstart="return false;">
 </BODY>
</HTML>

<script>
document.oncontextmenu = function(e){
   var target = (typeof e !="undefined")? e.target: event.srcElement
   if (target.tagName == "IMG" || (target.tagName == 'A' && target.firstChild.tagName == 'IMG'))
       return false
}
</script>

Best to you all out there, Megalo

Before disable right-click you need to know its corn. It is used to navigate (go back/forward), reload and add to favorites. If you disable it, your visitors will suffer and likely avoid your blog.

instead of this, it is better to use disable selection of text or html :

Add the following html code to your BODY tag:Here is how your BODY tag may look once implemented:

ondragstart=”return false” onselectstart=”return false”

Thanks

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

I used it on my website at http://www.namdevmatrimony.in/It's works like a magic!!! :)

This worked but it meant that I couldn't highlight any text on my website, if there anyway to make it so it is just specific to images rather than not being able to highlight anything on my site

We actually made a free plugin to disable right clicking and dragging and dropping on only images, so you protect your intellectual property without compromising the user experience by disabling right clicking everywhere. You can get it at www.squareguru.com/content-protection