Draggabilly is a powerful drag and drop element plug-in.

Draggabilly is a powerful drag and drop element plug-in.

Draggabilly is a powerful drag and drop plug-in for webpage elements. This drag-and-drop plug-in can be used in combination with jQuery or in pure js mode. It provides powerful drag-and-drop elements and supports Internet Explorer 8 and mobile touch devices.

Download Online Preview source code

Installation Method

You can install the draggabilly plug-in through bower or npm.

bower install draggabillynpm install draggabilly                              

Used as a jQuery plug-in

var $draggable = $('.draggable').draggabilly({  // options...})                           

Initialize the drag element plug-in through pure JS

var elem = document.querySelector('.draggable');var draggie = new Draggabilly( elem, {  // options...});// or pass in selector string as first argumentvar draggie = new Draggabilly( '.draggable', {  // options...});// if you have multiple .draggable elements// get all draggie elementsvar draggableElems = document.querySelectorAll('.draggable');// array of Draggabilliesvar draggies = []// init Draggabilliesfor ( var i=0, len = draggableElems.length; i < len; i++ ) {  var draggableElem = draggableElems[i];  var draggie = new Draggabilly( draggableElem, {    // options...  });  draggies.push( draggie );}                            

CSS style

When dragging an element, the plug-in attaches two class classes:

• .is-pointer-down: When a user clicks an element (mouse, touch, pointer) for the first time, it is the added class.
• .is-dragging: Class added when the element is dragged.

Configuration parameters

• axis: Type: String, available value: 'X' or 'y '. The constraint element can only move on the X or Y axis.
• containment: Type: Element, Selector String or Boolean. The constraint element can only be dragged in the specified container. If it is settrueThe constraint container is the parent element of the element.
• grid: Type: Array, available value: [x, y]. Element dragging is performed by means of mesh adsorption.
• handle: Type: Selector String. Drag interaction element.

Events are bound to events using jQuery.

You can use standard jQuery events:.on(),.off(),.one()To bind events. Within the event,thisThe reference is the Draggabilly element.

// JQueryfunction listener (/* parameters */) {// obtain the Draggabilly object instance var draggie = $ (this ). data ('draggabilly '); console. log ('eventname happened', draggie. position. x, draggie. position. y);} // bind event listening $ draggable. on ('eventname', listener); // remove event listening $ draggable. off ('eventname', listener); // only bind an event ONCE. Note that the event is ONCE instead of ONE or ON $ draggable. one ('eventname', function () {console. log ('eventname happened just once ');});

Bind events using pure JS

You can also use pure JS.on(),.off(),.one()To bind events. Within the event,thisThe reference is the Draggabilly element.

// Vanilla JSfunction listener (/* parameters */) {console. log ('eventname happened', this. position. x, this. position. y);} // bind the event to listen to draggie. on ('eventname', listener); // remove the event listening draggie. off ('eventname', listener); // only bind an event ONCE. Note that it is ONCE instead of ONE or ONdraggie. once ('eventname', function () {console. log ('eventname happened just once ');});

DragStart

Triggered when the element moves at the beginning of the drag.

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

• event: Type: Event. NativemousedownOrtouchstartEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.

DragMove

Triggered when the drag and drop element moves.

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

• event: Type: Event. NativemousemoveOrtouchmoveEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.
• moveVector: Type: Object. How far is the mouse pointer moving from the starting position:{ x: 20, y: -30 }.

DragEnd

Triggered when the element is dragged.

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

• event: Type: Event. NativemouseupOrtouchendEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.

PointerDown

Triggered when the user pointer (mouse, touch, pointer) is pressed.

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

• event: Type: Event. NativemousedownOrtouchstartEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.

PointerMove

Triggered when the user pointer moves.

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

• event: Type: Event. NativemousemoveOrtouchmoveEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.
• moveVector: Type: Object. How far is the mouse pointer moving from the starting position:{ x: 20, y: -30 }.

PointerUp

Triggered when the user pointer is released.

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

• event: Type: Event. NativemouseupOrtouchendEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.

StaticClick

Triggered when the user pointer is pressed and not released and not moved.

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

• event: Type: Event. NativemouseupOrtouchendEvent.
• pointer: Type: MouseEvent or Touch. Yes.pageXAnd.pageYEvent object.

Method

disable

// jQuery$draggable.draggabilly('disable')// vanilla JSdraggie.disable()                              

enable

// jQuery$draggable.draggabilly('enable')// vanilla JSdraggie.enable()                             

destroy

// jQuery$draggable.draggabilly('destroy')// vanilla JSdraggie.destroy()                          

jQuery.fn.data('draggabilly'): Get the Draggabilly instance from the jQuery object.

var draggie = $('.draggable').data('draggabilly')// access Draggabilly propertiesconsole.log( 'draggie at ' + draggie.position.x + ', ' + draggie.position.y )                         

Draggabilly official home: http://draggabilly.desandro.com/