Disable dragging an image from an HTML page

Question

I need to put an image in my page  I want to disable dragging of that image  I am trying lot of things but no help  Can somebody help me out    I don t want to keep that image as a background-image because I am resizing the image

User · Accepted Answer

I tried myself and found this is working      img   mousedown function        return false        I am sure this disables dragging of all the images  Not sure it effects something else

User · Answer

See this answer  in Chrome and Safari you can use the following style to disable the default dragging   -webkit-user-drag  auto   element   none    You could try user-select for Firefox and IE 10     -moz-user-select  none   text   all   element -ms-user-select  none   text   all   element

User · Answer

CSS only solution  use pointer-events  none  https   developer mozilla org en-US docs CSS pointer-events

User · Answer

Since my images were created using ajax  and therefore not available on windows load       page   delegate  img    dragstart   function  event    event preventDefault         This way I can control which section blocks the behavior  it only uses one event binding and it works for future ajax created images without having to do anything   With jQuery new on binding       page   on  dragstart    img   function event    event preventDefault         thanks  ialphan

User · Answer

Well I don t know if the answers in here have helped everyone or not  but here s a simple inline CSS trick which would definitely help you to disable dragging and selecting texts on a HTML page   On your  lt body gt  tag add ondragstart  return false   This will disable dragging of images  But if you also want to disable text selection then add onselectstart  return false    The code will look like this   lt body ondragstart  return false  onselectstart  return false  gt

User · Answer

You can like this     document getElementById  my-image   ondragstart   function     return false       See it working  or not working  rather   It seems you are using jQuery      img   on  dragstart   function event    event preventDefault

User · Answer

simplest cross browser solution is    lt img draggable  false  ondragstart  return false   src         gt    problem with  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      is that it is not working in firefox

User · Answer

window ondragstart   function     return false

User · Answer

document getElementById   yourImageId   addEventListener  dragstart   function e         e preventDefault          Works in this Plunker http   plnkr co edit HbAbJkF0PVLIMjTmEZml

User · Answer

Directly use this  ondragstart  return false   in your image tag     lt img src  http   image-example png  ondragstart  return false    gt    If you have multiple images  wrapped on a  lt div gt  tag    lt div ondragstart  return false   gt      lt img src  image1 png   gt      lt img scr  image2 png   gt   lt  div gt    Works in all major browsers

User · Answer

jQuery      body   on  dragstart drop   function e       e preventDefault        return false        You can replace the body selector with any other container that children you want to prevent from being dragged and dropped

User · Answer

This code does exactly what you want  It prevents the image from dragging while allowing any other actions that depend on the event      img   mousedown function e       e preventDefault

User · Answer

Set the following CSS properties to the image   user-drag  none   user-select  none  -moz-user-select  none  -webkit-user-drag  none  -webkit-user-select  none  -ms-user-select  none

User · Answer

I did the css properties shown here as well as monitor ondragstart with the following javascript   handleDragStart  function  evt        if  evt target nodeName match    IMG DIV SPAN A   i           evt preventDefault          return false

User · Answer

An elegant way to do it with JQuery    quot body quot   on  mousedown   img  function e       e stopPropagation        e preventDefault

User · Answer

You may consider my solution the best  Most of answers are not compatible with old browsers like IE8 since e preventDefault   wont be supported as well as ondragstart event  To do it cross browser compatible you have to block mousemove event for this image  See example below   jQuery      my image   mousemove  function e    return false         fix for IE     my image   attr  draggable   false      disable dragging from attribute   without jQuery  var my image   document getElementById  my image    my image setAttribute  draggable   false    if  my image addEventListener       my image addEventListener  mousemove   function e    return false       else if  my image attachEvent       my image attachEvent  onmousemove   function e    return false         tested and worked even for IE8

User · Answer

lt img draggable  false  src  images testimg1 jpg  alt     gt

User · Answer

just add draggable  false  to your image tag    lt img draggable  false  src  image png  gt    IE8 and under doesn t support however

User · Answer

Great solution  had one small issue with conflicts  If anyone else has conflict from other js library simply enable no conflict like so   var  j   jQuery noConflict    j  img   bind  dragstart   function event    event preventDefault          Hope this helps someone out

User · Answer

You can use inline code for this   x000D   x000D   lt img draggable  false  src  http   www ourkanpur com images logo png  gt  x000D   x000D   x000D    And the second option is use external or on-page css    x000D   x000D  img   x000D    -moz-user-select  none  x000D    -webkit-user-select  none  x000D    -ms-user-select  none  x000D    user-select  none  x000D    -webkit-user-drag  none  x000D    user-drag  none  x000D    -webkit-touch-callout  none  x000D    x000D   lt img src  http   www ourkanpur com images logo png  gt  x000D   x000D   x000D    Both are Working Correctly  I m using external css on this site  Click Here

User · Answer

Well  this is possible  and the other answers posted are perfectly valid  but you could take a brute force approach and prevent the default behavior of mousedown on images  Which  is to start dragging the image    Something like this   window onload   function            var images   document getElementsByTagName  img           for  var i   0  img   images i                    img ondragstart   function     return false

User · Answer

You can add the following to each image you don t want to be draggable   inside the img tag    onmousedown  return false     e g    img src  Koala jpg  onmousedown  return false

User · Answer

Stealing from my own answer   just add a completely transparent element of the same size over the image   When you resize your image  be sure to resize the element   This should work for most browsers  even older ones

User · Answer

Answer is simple    lt body oncontextmenu  return false   gt  - disable right-click     lt body ondragstart  return false   gt  - disable mouse dragging     lt body ondrop  return false   gt  - disable mouse drop

User · Answer

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

[javascript] Disable dragging an image from an HTML page

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to image