Bind Draggabilly Events with jQuery or Vanilla JS

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one(). Inside jQuery event listeners this refers to the Draggabilly element.

// jQuery
function listener(/* parameters */) {
  // get Draggabilly instance
  var draggie = $(this).data('draggabilly');
  console.log( 'eventName happened', draggie.position.x, draggie.position.y );
}
// bind event listener
$draggable.on( 'eventName', listener );
// unbind event listener
$draggable.off( 'eventName', listener );
// bind event listener to trigger once. note ONE not ON
$draggable.one( 'eventName', function() {
  console.log('eventName happened just once');
});

Bind events with vanilla JS with .on(), .off(), and .once() methods. Inside vanilla JS event listeners this refers to the Draggabilly instance.

// vanilla JS
function listener(/* parameters */) {
  console.log( 'eventName happened', this.position.x, this.position.y );
}
// bind event listener
draggie.on( 'eventName', listener );
// unbind event listener
draggie.off( 'eventName', listener );
// bind event listener to trigger once. note ONCE not ONE or ON
draggie.once( 'eventName', function() {
  console.log('eventName happened just once');
});

dragStart

Triggered when dragging starts and the element starts moving. Dragging starts after the user’s pointer has moved a couple pixels to allow for clicks.

// jQuery
$draggable.on( 'dragStart', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'dragStart', function( event, pointer ) {...})

• event – Type: Event – the original mousedown or touchstart event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

dragMove

Triggered when dragging moves.

// jQuery
$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})
// vanilla JS
draggie.on( 'dragMove', function( event, pointer, moveVector ) {...})

• event – Type: Event – the original mousemove or touchmove event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY
• moveVector Type: Object – How far the pointer has moved from its start position { x: 20, y: -30 }

Edit demo or vanilla JS demo on CodePen.

dragEnd

Triggered when dragging ends.

// jQuery
$draggable.on( 'dragEnd', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'dragEnd', function( event, pointer ) {...})

• event – Type: Event – the original mouseup or touchend event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

pointerDown

Triggered when the user’s pointer (mouse, touch, pointer) presses down.

// jQuery
$draggable.on( 'pointerDown', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'pointerDown', function( event, pointer ) {...})

• event – Type: Event – the original mousedown or touchstart event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

pointerMove

Triggered when the user’s pointer moves.

// jQuery
$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {...})
// vanilla JS
draggie.on( 'pointerMove', function( event, pointer, moveVector ) {...})

• event – Type: Event – the original mousemove or touchmove event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY
• moveVector Type: Object – How far the pointer has moved from its start position { x: 20, y: -30 }

Edit demo or vanilla JS demo on CodePen.

pointerUp

Triggered when the user’s pointer unpresses.

// jQuery
$draggable.on( 'pointerUp', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'pointerUp', function( event, pointer ) {...})

• event – Type: Event – the original mouseup or touchend event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

staticClick

Triggered when the user’s pointer is pressed and unpressed and has not moved enough to start dragging.

click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Draggabilly’s staticClick event resolves this, as it is triggered when the user has not dragged.

// jQuery
$draggable.on( 'staticClick', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'staticClick', function( event, pointer ) {...})

• event – Type: Event – the original mouseup or touchend event
• pointer – Type: MouseEvent or Touch – the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.