Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Disable dragging of ghost image in CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 19.2k
    Comment on it

    Hey Readers!

    Images are used in web pages to make them look more interactive and appealing. We must have surely noticed a thing about images. When you click on an image and drag it, there is a semi-transparent image that follows the mouse till you hold it down. This is called the ghost image.

    There is a solution to everything in CSS. So, is there a way to prevent the user from seeing this ghost  image, not for security purposes but for the interacrive experience?


    Yes, there is.


    Add the following code to your standard CSS.

    img { 
      -webkit-user-drag: none; 
      -khtml-user-drag: none; 
      -moz-user-drag: none; 
      -o-user-drag: none; 
      user-drag: none; 


    There is also an equally simple solution to this without using CSS.

    Just add attribute draggable="false" to the image and put this inside a div.

    <div draggable="true"> 
       <img draggable="false" src="your/path/to/image.png"/>


    Keep Coding.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: