Jump to content

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

Recommended Posts

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

Edited by Nic
Link to comment
  • 2 months later...

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:


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.

Developer at Thinkful.com Developed the Shutterstock Blog, and a few other SQSP sites while at Big Human. Formerly at Google.

Link to comment

@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?


Link to comment

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.

Link to comment

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.

Developer Evangelist at Squarespace.

Link to comment
  • 3 weeks later...
  • 10 months later...

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.

Image clickthrough link

I hope this helps.

Edited by Guest
Link to comment
  • 4 weeks later...
  • 4 weeks later...
  • 2 weeks later...
  • 2 months later...

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.

Link to comment
  • 5 months later...
  • 5 months later...

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!

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

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

Best to you all out there, Megalo

Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Link to comment
  • 4 months later...

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”


Edited by OriginBuzz
Link to comment
  • 1 month later...
  • 2 months later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.