Eliminate "Ghosting" when Dragging an Image in the Browser

programming web dev
4

When I tried setting the user-drag (and as I also found out -webkit-user-drag,-moz-user-drag) to none, I didn’t see the ghosted image. Another solution is to set the draggable attribute on the image to false:

<!DOCTYPE html>
<html>

<head>
    <title>Drag Image Without Browser Ghosting</title>
    <style>
        #contentContainer {
            width: 550px;
            height: 350px;
            border: 5px black solid;
            overflow: hidden;
            background-color: #FFEE33;
        }
        #contentContainer img {
          position: absolute;
        }
    </style>
</head>

<body>
    <div id="contentContainer">
      <img draggable="false" id="dragImage" src="https://www.kirupa.com/images/blueSquare.png"/>
    </div>
</body>

</html>

Does this solution work better? :slight_smile: