draggabilly.desandro.comDraggabilly - Drag and drop library for mouse and touch devices

Drag me Edit this demo or vanilla JS demo on CodePen Make that shiz draggable github.com/desandro/draggabilly Rad because it supports mouse and touch devices. v3.0.0 Install Download draggabilly.pkgd.min.js minified draggabilly.pkgd.js un-minified Package managers Install with npm: npm install draggabilly Install with Yarn: yarn add draggabilly CDN Link directly to draggabilly.pkgd.min.js on unpkg.com .script src = "https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js"/ scriptUsage Initialize as a jQuery plugin var $draggable = $( ’.draggable’ ). draggabilly ({ // options... }) Initialize with vanilla JS var elem = document . querySelector ( ’.draggable’ ); var draggie = new ( elem, { // options... }); // or pass in selector string as first argument var draggie = new ( ’.draggable’ , { // options... }); // if you have multiple .draggable elements // get all draggie elements var draggableElems = document . querySelectorAll ( ’.draggable’ ); // array of Draggabillies var draggies = [] // init Draggabillies for ( var i= 0 ; idraggableElems. length ; i++ ) { var draggableElem = draggableElems[i]; var draggie = new ( draggableElem, { // options... }); draggies. push ( draggie ); } Classes .is-pointer-down added when the user’s pointer (mouse, touch, pointer) first presses down. .is-dragging added when elements starts to drag. Options axis axis: ’x’ Edit this demo or vanilla JS demo on CodePen Type: String Values: ’x’ or ’y’ axis : ’x’ Constrains movement to horizontal or vertical axis. containment Edit this demo or vanilla JS demo on CodePen 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. grid grid: [ 20, 20 ] Edit this demo or vanilla JS demo on CodePen Type: Array Values: [ x, y ] grid : [ 20 , 20 ] Snaps the element to a grid, every x and y pixels. handle Edit this demo or vanilla JS demo on CodePen Type: Selector String , Array , HTMLElement // select all .handle children with selector string handle : ’.handle’ // set as element handle : element. querySelector ( ’.handle’ ) // set as array or NodeList handle : [ element. querySelector ( ’.handle1’ ), element. querySelector ( ’.handle2’ ) ] Specifies on what element the drag interaction starts. handle is useful for when you do not want all inner elements to be used for dragging, like inputs and forms. See back handle example on CodePen . Events Bind events with jQuery with standard jQuery event methods .on() , .off() , and .one() . Inside jQuery event listeners this refers to the element. // jQuery function listener ( /* parameters */ ) { // get 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 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. ’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. Methods disable // jQuery $draggable. draggabilly ( ’disable’ ) // vanilla JS draggie . disable () enable // jQuery $draggable. draggabilly ( ’enable’ ) // vanilla JS draggie . enable () setPosition // jQuery $draggable. draggabilly ( ’setPosition’ , x, y ) // vanilla JS draggie . setPosition ( x, y ) x - Type: Number - horizontal position y - Type: Number - vertical position dragEnd Stop dragging. // jQuery $draggable. draggabilly ( ’dragEnd’ ) // vanilla JS draggie . dragEnd () destroy // jQuery $draggable. draggabilly ( ’destroy’ ) // vanilla JS draggie . destroy () jQuery.fn.data(’draggabilly’) Get the instance from a jQuery object. instances are useful to access properties. var draggie = $( ’.draggable’ ). data ( ’draggabilly’ ) // access properties console . log ( ’draggie at ’ + draggie . position . x + ’, ’ + draggie . position . y ) Properties position draggie . position // = { x: 20, y: -30 } position - Type: Object x - Type: Number y...