Easy and Touch-enabled jQuery Draggable Obeject Plugin - pep.js

pep.js is a simple, cross browser and mobile-friendly jQuery plugin used to enable draggable functionality on any DOM element. The plugin allows to move any object by clicking or touching on it and dragging it anywhere within the viewport. Pep.js also comes with a lot of options and APIs that could fit to a wide range of design purposes.

Check the demos fold in the zip for more examples.

Basic Usage:

1. Load the latest version jQuery javascript form Google CDN and local pep.js script on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.pep.js"></script>

2. Create a DOM element where you want to apply the draggable functionality on.

<div class="pep"></div>

3. Just call the plugin and you're done.

<script type="text/javascript">
$(document).ready(function(){
$('.pep').pep();
});
</script>

4. Full options.

// alled when first touch / click event is triggered
initiate:   function(){},

// called when dragging starts
start:  function(){},

// called continuously while the object is dragging
drag:   function(){},

// called when dragging stops
stop:   function(){},

// called while object is easing
easing: null,

// called after dragging stops, and object has come to rest
rest:   function(){},

// custom method to override the default moveTo functionality.
moveTo: false,

// if object has not moved outside of the startThreshold, 
// call either the user-provided stop or rest fxn's anyway, or call both
callIfNotStarted:   ['stop', 'rest'],

// how far past should the object move in the [x,y]
// direction before user 'start' function is called
startThreshold: [0,0],

// define an [x,y] grid for the object to move along
grid:   [1,1],

// show debug values and events in the lower-righthand corner of page
debug:  false,

// class to add to the pep element while dragging
activeClass:'pep-active',

// +/- this number to modify to 1:1 ratio of finger/mouse movement to el movement
multiplier: 1,

// +/- this number to modify the springiness of the object as your release it
velocityMultiplier: 2.5,

// in some cases, we don't want to prevent the default
// mousedown/touchstart on our Pep object, your call
shouldPreventDefault:   true,

// set to false to stop drag events from bubbling up through the DOM tree
allowDragEventPropagation:  true,

// space delimited set of events which programmatically cause the object to stop
stopEvents: '',

// apply the CSS3 silver bullet method to accelerate the pep objec
hardwareAccelerate: true,

// use CSS transform translations as opposed to top/left
useCSSTranslation:  true,

// apply user-select: none (CSS) to the object
disableSelect:  true,

cssEaseString:  "cubic-bezier(0.190, 1.000, 0.220, 1.000)",

// how long should it take (in ms) for the object to get from stop to rest?
cssEaseDuration:1000,

// disable/enable easing
shouldEase: true,

// CSS selector that this element can be dropped on, false to disable
droppable:  false,

// class to add to active droppable parents,
// inspect this.activeDropRegions within each function for valuable info
droppableActiveClass:   'pep-dpa',

// override pep's default overlap function; 
// takes two args: a & b and returns true if they overlap
overlapFunction:false,

// constrain object to 'window' or 'parent' or [top, right, bottom, left];
// works best w/ useCSSTranslation set to false
constrainTo:false,

// remove margins for better object placement
removeMargins:  true,

// bypass pep's object placement logic
place:  true,

// defer object placement until start event occurs
deferPlacement: false,

// constrain object to either 'x' or 'y' axis
axis:   null,

// WIP
forceNonCSS3Movement:   false,

// valid CSS/jQuery selector for elements within the Pep object 
// that should allow user interaction, and thus propagate to allow movement
elementsWithInteraction:'input',

// revert back to initial position
revert: false,

// revert after given event - 'stop' or 'ease'
revertAfter:'stop',

// return false / true from this function to conditionally revert an object
revertIf:   function(){ return true; },

// start event will be ignored if triggered by a right click
ignoreRightClick:   true,

// set the default left/top coordinate to position the object with on load
startPos:   {
left:   null,
top:null
}

Change logs:

2017-04-26

• v0.6.10
• Add "auto" as a value for the axis option

2016-05-18

• v0.6.8
• Adds missing semicolon

2015-08-31

• v0.6.7
• Passes through events that begin on elementsWithInteration instead of stoping propagation completely

2014-12-17

• Fixed isTouch and isPointerEventCompatible are both returning true in WindowsPhone devices

2014-06-13

• add in support for user-provided function called

2014-04-08

• bugs fixed

2014-03-28

• bugs fixed

2014-03-14

• bugs fixed

2013-12-14

• bugs fixed

---

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