Minimal Image Panning Library – LC-Mouse-Drag

A tiny image panning JavaScript library that provides a smooth drag-to-pan functionality on images.

Supports both mouse drag and touch swipe events.

How to use it:

1. Import the lc-mouse-drag.js JavaScript library into the document.

<script src="lc-mouse-drag.js"></script>

2. Initialize the library on the image container as follows:

<div id="inner">
  <img src="demo.webp" />
</div>

lc_mouseDrag('#inner');

3. Determine the animation delta when ending dragging. Default: 0.3.

lc_mouseDrag('#inner', 0);

4. Disable X-axis and/or Y-axis dragging. Default: false.

lc_mouseDrag('#inner', 0, true, false);

5. Important CSS rules for desktop.

body:not(.lc_mousedrag_is_mobile) #inner {
  overflow: hidden;
  cursor: grab;
}

Changelog:

v1.1.1 (01/10/2025)

• fixed: targeted elements not handling click events

v1.1.0 (12/16/2025)

• new: better events pattern tracked to avoid troubles with unreliabble classic mouse ones

v1.0.2 (10/31/2025)

• new: now truly detects deviceses with a cursor to operate