Dragscrollable是一个很小的jQuery插件，它可以在可滚动的元素上启用Drag To Scroll（桌面）和Swipe To Scroll（手机和平板电脑）功能。

当在一个小容器中包含超宽或超高的元素（如高分辨率图像）时，它很有用，这样用户就可以通过鼠标拖动或手指滑动来查看完整的内容。

参见：

• 使用jQuery的拖放滚动插件-dragScroll.js
• 用于jQuery的平滑拖放插件-dragNscroll
• 使用鼠标拖动滚动滚动内容的小型JavaScript库
• 平滑拖动/滑动滚动JavaScript库âDrag.js

如何使用它:

1.下载并放置JavaScript文件拖动可滚动.min.js在jQuery库之后。

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

2.调用函数可拖动的在你的可滚动容器上，插件将完成剩下的工作。

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

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

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

3.默认情况下，插件会在可滚动元素的第一个子元素上自动启用拖动（滑动）滚动功能。您可以通过重写牵引选择器选项如下。

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

4.确定可拖动元素是否应该接受传播的事件。默认值：true。

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

5.确定是否阻止默认行为。默认值：true。

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

6.确定是否启用水平滚动。默认值：true。

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

7.确定哪个鼠标按钮应该触发拖动（滑动）滚动功能。默认值：1（左键）。

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

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

预览截图

jQuery 微小拖动/滑动滚动插件 可拖动滚动