Minimal Image Panning Library – LC-Mouse-Drag

Category: Drag & Drop , Javascript | May 19, 2021
Author:LCweb-ita
Views Total:633 views
Official Page:Go to website
Last Update:May 19, 2021
License:MIT

Preview:

Minimal Image Panning Library – LC-Mouse-Drag

Description:

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;
}

You Might Be Interested In:


Leave a Reply