Eliminate "Ghosting" when Dragging an Image in the Browser

programming web dev
1

Hi, i’m working in a game, now I have the following problem I have to drag an image, but the navigator create a ghost image, that’s the problem, I have to eleminate it

2

There are several ways of fixing that. I think the easiest is to set the user-drag CSS property to none on the image elements that will be dragged. Let me know if you tried that and it works :slight_smile:

3

Thank you very much for your answer, but that does not eliminate the ghost image that is produced, it only leaves it fixed, but the same ghost image is created

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:

5

Ok - after fiddling with this some more, one sure-fire solution is to wrap the image inside a div element and drag the div element around. Check out this:

<!DOCTYPE html>
<html>

<head>
    <title>Drag Image Without Browser Ghosting</title>
    <style>
        #contentContainer {
          padding: 40;
        }
        #dragImage {
          width: 300px;
          height: 200px;
          background-color: blue;
          cursor: move;
          position: absolute;
        }
        #dragImage img {
          pointer-events: none;
          width: 300px;
          height: 200px;
        }
    </style>
</head>

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

      var dragImage = document.querySelector("#dragImage");

      var elementX = 0;
      var elementY = 0;

      dragImage.addEventListener("mousedown", startDrag, false);
      dragImage.addEventListener("mouseup", stopDrag, false);
      dragImage.addEventListener("mousemove", drag, false);

      function startDrag(e) {
        startDragging = true;

        elementX = e.clientX - dragImage.offsetLeft;
        elementY = e.clientY - dragImage.offsetTop;

      }
      function stopDrag(e) {
        startDragging = false;
      }
      function drag(e) {
        if (startDragging) {
          var xPos = e.clientX - elementX;
          var yPos = e.clientY - elementY;
          dragImage.style.left = xPos + "px";
          dragImage.style.top = yPos + "px";
        }
      }
    </script>
</body>

</html>

Note that I set the pointer-events CSS property to none on our image element to ensure no mouse interactions affect it :slight_smile:

6

I’m running a PC with vista and Ken is right, if you disable the “show content while dragging” option, this won’t be seen. However, I’m assuming 99% of windows users havn’t done this in which case they can see the ghosting. It’s really not a big deal, and I may have to come to terms with it, but it just seems unprofessional and amatur. This can be seen in Explorer, Firefox, and Google Chrome to the extent of my knowlege.

This is the site I built for my friend, http://www.creaturerevenge.com/ It being the first css site I’ve ever built, its bound to generate criticism, but if you click/hold on ANY image and drag you will see the effect I am talking about. If you do the same for this site, you will just get a “cancel” icon. I’m just trying to figure out what is allowing for this difference.

7

Thank you very much, just giving the “draggable” property in false, solved my problem.

1 Like
8

Haha! Glad that worked :slight_smile: