Make that shiz draggable
Rad because it supports IE8+ and multi-touch.
Grab a packaged source file:
- draggabilly.pkgd.min.js for production
- draggabilly.pkgd.js for development
Or if you're cool with the command line, install with Bower.
bower install draggabilly
var elem = document.querySelector('#draggable');
var draggie = new Draggabilly( elem, {
// options...
});
When dragging, Draggabillly will add the class .is-dragging
to the element.
Type: Element, Selector String, or Boolean
containment: '#container'
Contains movement to the bounds of the element. If true
, the container will be the parent element.
Type: Selector String
handle: '.handle'
Specifies on what element the drag interaction starts.
handle
is useful for when you want not all inner elements to be used for dragging, like inputs and forms. See back handle example on CodePen.
Draggabilly is an Event Emitter. You can bind event listeners to events.
var draggie = new Draggabilly( elem );
function onDragMove( instance, event, pointer ) {
console.log( 'dragMove on ' + event.type +
pointer.pageX + ', ' + pointer.pageY +
' position at ' + instance.position.x + ', ' + instance.position.y );
}
// bind event listener
draggie.on( 'dragMove', onDragMove );
// un-bind event listener
draggie.off( 'dragMove', onDragMove );
// return true to trigger an event listener just once
draggie.on( 'dragMove', function() {
console.log('Draggabilly did move, just once');
return true;
});
.on( 'dragStart', function( draggieInstance, event, pointer ) { //...
draggieInstance
- Type: Draggabilly - the Draggabilly instanceevent
- Type: Event - the originalmousedown
ortouchstart
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
.on( 'dragMove', function( draggieInstance, event, pointer ) { //...
draggieInstance
- Type: Draggabilly - the Draggabilly instanceevent
- Type: Event - the originalmousemove
ortouchmove
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
.on( 'dragEnd', function( draggieInstance, event, pointer ) { //...
draggieInstance
- Type: Draggabilly - the Draggabilly instanceevent
- Type: Event - the originalmouseup
ortouchend
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
draggie.disable()
draggie.enable()
Draggabilly is released under the MIT License. Have at it.