Add a kinetic dragging ability to any elements on HTML5-ready devices and desktops only with one simple line of code.
pep.jquery.js - was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery's animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.
Pep’s features:
- built-in support for custom start, stop, rest (called when easing completes)
- drag events
- constraining objects to either their parent or the window
- debugger
- the ability to customize your own kinetic easing functions
How to use
Select your jQuery element, then pep it:
$('#peppable').pep().Alternatively, you can pass a hash of parameters. Below are the defaults.
Parameters with their defaults:
// show the debugger
debug: false
// CSS class to append to peppable object
activeClass: 'active'
// speed up drag (1 == unity, < 1 == slower, > 1 == faster)
multiplier: 1,
// manually fire a stop a peppable object when these events are fired (space delimited)
stopEvents: ""
// get more easing functions here: http://matthewlein.com/ceaser/
cssEaseString: "cubic-bezier(0.210, 1, 0.220, 1.000)"
// how long should it take to ease to its final resting place after mouseup/touchend
cssEaseDuration: 1000
// let peppable object move outside of window?
constrainToWindow: false
// let peppable object move outside of parent?
// EXPERIMENTAL! use with caution. you've been warned.
constrainToParent: false
// fired...
// ....while dragging
drag: function(ev,obj){ /* fire on drag */ }
// ... after stopping
stop: function(ev,obj){ /* fire on stop */ }
// ... after starting
start: function(ev,obj){ /* fire on start */ }So, for instance, you can log to the console while dragging, debug, and speed up the drag like so:
var options = {
debug: true,
drag: function(ev,obj){ console.log('we're dragging!') },
multiplier: 1.2
};
$('#peppable').pep(options); Maybe you want to increase the ease time, change some text when you start dragging and upon ease completion:
var options = {
start: function(ev,obj){ $('#title').text('Start!'); },
drag: function(ev,obj){ console.log('we're dragging!'); },
rest: function(ev,obj){ console.log('ease completed!'); }
};
$('#peppable').pep(options); Other helper functions:
obj.setMultiplier(val) // programmatically increase or decrease the multiplier
obj.enableEase() // ... enable ease
obj.disableEase() // ... disable ease
obj.forceStop() // ... force the object to stoppep should work on all modern browsers, such as: Silk Browser/Android 2.3 Gingerbread, iPhone (iOS 5.0), iPad (iOS 5.1)
