A jQuery plugin designed to allow click and drag panning of a scrollable element
Download the production version or the development version.
jQuery Dragpan has the following requirements:
<div id="document">
<div id="content">
</div>
</div>
<script src="path/to/jquery.js"></script>
<script src="path/to/dragpan.js"></script>
<script>
$(document).ready( function () {
$("#document").dragpan();
});
</script>
Options can be parsed when Dragpan is instatiated on an element or after.
You can adjust the speed of the drag using the speedX and speedY options.
$("element").dragpan({ speedX: 20, speedY: 20 });
The default speeds are 10, this equates to a 1:1 relationship between mouse movement and scrolling.
You can set the parent element, this is useful if the viewport sized element is not the jquery object you are using.
$("element").dragpan({ parent: $("element").parent() });
By default this will be the element you are using the dragpan method on.
You can tell dragpan to instantiate without enabling functionality using the following:
$("element").dragpan({ on: false });
This will default to true meaning if you do not specify this then the dragpan functionality will be enabled.
You can use methods the following non-private methods:
####On
You can turn on dragpan functionality using the following on an already instantiated dragpan instance.
$("element").dragpan('on');
You can turn off the dragpan functionality using the following on an already instantiated dragpan instance.
$("element").dragpan('off');