How do I drag an image smoothly around the screen using pure javascript

Question

I'm trying to use JavaScript drag an image around the screen. I've already written a script that works fine on divs with text, but when I use it on a image it works very intermittently.

I have put my code on jsfiddle so others can see what I mean. http://jsfiddle.net/laurence/YNMEX/

If you run it you will find that the text block can be dragged and dropped, but when you try the same thing with the image, it leaves the image behind. It's like the image can't keep up with the movement of the mouse.

I have repeated the code on jsfiddle below:

function startDrag(e) {
  // determine event object
  if (!e) {
    var e = window.event;
  }

  // IE uses srcElement, others use target
  var targ = e.target ? e.target : e.srcElement;

  if (targ.className != 'dragme') {
    return
  };
  // calculate event X, Y coordinates
  offsetX = e.clientX;
  offsetY = e.clientY;

  // assign default values for top and left properties
  if (!targ.style.left) {
    targ.style.left = '0px'
  };
  if (!targ.style.top) {
    targ.style.top = '0px'
  };

  // calculate integer values for top and left 
  // properties
  coordX = parseInt(targ.style.left);
  coordY = parseInt(targ.style.top);
  drag = true;

  // move div element
  document.onmousemove = dragDiv;
}

function dragDiv(e) {
  if (!drag) {
    return
  };
  if (!e) {
    var e = window.event
  };
  var targ = e.target ? e.target : e.srcElement;
  // move div element
  targ.style.left = coordX + e.clientX - offsetX + 'px';
  targ.style.top = coordY + e.clientY - offsetY + 'px';
  return false;
}

function stopDrag() {
  drag = false;
}
window.onload = function() {
  document.onmousedown = startDrag;
  document.onmouseup = stopDrag;
}

.dragme {
  position: relative;
  width: 270px;
  height: 203px;
  cursor: move;
}

#draggable {
  background-color: #ccc;
  border: 1px solid #000;
}

<div id="draggable" class="dragme">"Hello World!"</div>
<img src="https://picsum.photos/270/203" alt="drag-and-drop image script" title="drag-and-drop image script" class="dragme">

Answer 1

Simply add return false at the end of your startDrag function to keep the browser from handling the click event.

Answer 2

Also targ should be assigned only on startDrag and global (without var):

http://jsfiddle.net/gigyme/YNMEX/132/

<script type="text/javascript">
    function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }
            if(e.preventDefault) e.preventDefault();

            // IE uses srcElement, others use target
            targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'dragme') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if(!targ.style.left) { targ.style.left='0px'};
            if (!targ.style.top) { targ.style.top='0px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.onmousemove=dragDiv;
            return false;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};
            // var targ=e.target?e.target:e.srcElement;
            // move div element
            targ.style.left=coordX+e.clientX-offsetX+'px';
            targ.style.top=coordY+e.clientY-offsetY+'px';
            return false;
        }
        function stopDrag() {
            drag=false;
        }
        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;
        }
</script>

Answer 3

You may add e.preventDefault(); at the end of your startDrag function