Tiny Drag/Swipe To Scroll Plugin For jQuery - Dragscrollable

Dragscrollable is a tiny jQuery plugin that enables Drag To Scroll (desktop) and Swipe To Scroll (mobile & tablet) functionalities on scrollable elements.

It is useful when containing extra-wide or tall elements (such as hi-res images) in a small container so that the user can view the full content with mouse drag or finger swipe.

See Also:

• Drag/Swipe To Scroll Plugin With jQuery - dragScroll.js
• Smooth Drag To Scroll Plugin For jQuery - dragNscroll
• Small JavaScript Library To Scroll Content with Mouse Drag – dragscroll
• Smooth Drag/Swipe To Scroll JavaScript Library – drag.js

How to use it:

1. Download 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. Call the function dragscrollable on your scrollable container and the plugin will do the rest.

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

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

$('div.box').dragscrollable({
  // options here
});

3. By default, the plugin automatically enables the drag (swipe) to scroll functionality on the first child of the scrollable element. You can change the scrollable element by overriding the dragSelector option as follows.

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

4. Determine whether the draggable element should accept propagated events. Default: true.

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

5. Determine whether to prevent the default behavior. Default: true.

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

6. Determine whether to enable horizontal scrolling. Default: true.

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

7. Determine which mouse button should trigger the drag (swipe) to scroll functionality. Default: 1 (left button).

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

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

---

This awesome jQuery plugin is developed by mvlandys. For more Advanced Usages, please check the demo page or visit the official website.