Minimal Image Panning Library – LC-Mouse-Drag

Category: Drag & Drop , Javascript | May 19, 2021
Views Total:811 views
Official Page:Go to website
Last Update:May 19, 2021


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" />

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;

You Might Be Interested In:

Leave a Reply