Demo of Dragging image by Mouse in JavaScript

Drag this image using a mouse, pen, or touch input. The image remains inside the responsive demo area.

Draggable help icon

Return to tutorial on Image Position

JavaScript

const image = document.getElementById('myImage');
const area = document.getElementById('drag-area');
let shiftX = 0;
let shiftY = 0;

image.addEventListener('pointerdown', (event) => {
  const imageRect = image.getBoundingClientRect();
  shiftX = event.clientX - imageRect.left;
  shiftY = event.clientY - imageRect.top;
  image.setPointerCapture(event.pointerId);
});

image.addEventListener('pointermove', (event) => {
  if (!image.hasPointerCapture(event.pointerId)) return;

  const areaRect = area.getBoundingClientRect();
  const maxLeft = area.clientWidth - image.offsetWidth;
  const maxTop = area.clientHeight - image.offsetHeight;
  const left = Math.min(maxLeft, Math.max(0, event.clientX - areaRect.left - shiftX));
  const top = Math.min(maxTop, Math.max(0, event.clientY - areaRect.top - shiftY));

  image.style.left = `${left}px`;
  image.style.top = `${top}px`;
});

image.addEventListener('dragstart', (event) => event.preventDefault());

HTML

<div id="drag-area" style="position:relative; min-height:360px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="myImage" alt="Draggable help icon"
       style="position:absolute; left:50px; top:50px; max-width:80px; cursor:grab; touch-action:none;">
</div>

Complete working page

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Drag an Image with Pointer Events</title></head><body>
<div id="drag-area" style="position:relative; min-height:360px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="myImage" alt="Draggable help icon"
       style="position:absolute; left:50px; top:50px; max-width:80px; cursor:grab; touch-action:none;">
</div>
<script>
const image = document.getElementById('myImage');
const area = document.getElementById('drag-area');
let shiftX = 0;
let shiftY = 0;

image.addEventListener('pointerdown', (event) => {
  const imageRect = image.getBoundingClientRect();
  shiftX = event.clientX - imageRect.left;
  shiftY = event.clientY - imageRect.top;
  image.setPointerCapture(event.pointerId);
});

image.addEventListener('pointermove', (event) => {
  if (!image.hasPointerCapture(event.pointerId)) return;

  const areaRect = area.getBoundingClientRect();
  const maxLeft = area.clientWidth - image.offsetWidth;
  const maxTop = area.clientHeight - image.offsetHeight;
  const left = Math.min(maxLeft, Math.max(0, event.clientX - areaRect.left - shiftX));
  const top = Math.min(maxTop, Math.max(0, event.clientY - areaRect.top - shiftY));

  image.style.left = `${left}px`;
  image.style.top = `${top}px`;
});

image.addEventListener('dragstart', (event) => event.preventDefault());
</script></body></html>