Tiny Drag/Swipe To Scroll Plugin For jQuery – Dragscrollable

Dragscrollable is a tiny jQuery plugin that permits Drag To Scroll (desktop) and Swipe To Scroll (cell & pill) functionalities on scrollable components.

It’s helpful when containing extra-wide or tall components (resembling hi-res pictures) in a small container in order that the person can view the total content material with mouse drag or finger swipe.

See Additionally:

Methods to use it:

1. Obtain and place the JavaScript file dragscrollable.min.js after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dragscrollable.min.js"></script>

2. Name the operate dragscrollable in your scrollable container and the plugin will do the remainder.

<div class="field">
  <img src="xs.jpg" />
</div>

/* make it scrollable */
.field { 
  width: 400px; 
  top: 300px; 
  overflow: scroll; 
}

$('div.field').dragscrollable({
  // choices right here
});

3. By default, the plugin routinely allows the drag (swipe) to scroll performance on the primary little one of the scrollable ingredient. You possibly can change the scrollable ingredient by overriding the dragSelector choice as follows.

$('div.field').dragscrollable({
  dragSelector: '>:first',
});

4. Decide whether or not the draggable ingredient ought to settle for propagated occasions. Default: true.

$('div.field').dragscrollable({
  acceptPropagatedEvent: false,
});

5. Decide whether or not to forestall the default habits. Default: true.

$('div.field').dragscrollable({
  preventDefault: false,
});

6. Decide whether or not to allow horizontal scrolling. Default: true.

$('div.field').dragscrollable({
  allowY: true
});

7. Decide which mouse button ought to set off the drag (swipe) to scroll performance. Default: 1 (left button).

$('div.field').dragscrollable({
  // center button
  which: 2,
});

$('div.field').dragscrollable({
  // proper button
  which: 3,
});

This superior jQuery plugin is developed by mvlandys. For extra Superior Usages, please verify the demo web page or go to the official web site.