Touch-enabled Draggable & Sortable Library – draggable.js

Category: Drag & Drop , Javascript , Recommended | September 8, 2018
Author: Shopify
Views Total: 3,211
Official Page: Go to website
Last Update: September 8, 2018
License: MIT

Preview:

Touch-enabled Draggable & Sortable Library – draggable.js

Description:

draggable.js is a customizable draggable/droppable/sortable/swappable JavaScript library that works with mouse drag, touch and force touch events.

How to use it:

Install it via package managers:

# Yarn
$ yarn add @shopify/draggable

# NPM
$ npm install @shopify/draggable --save

Draggable API, options, and events.

// containers: specify the containers that hold draggable items
// options: an array of options as shown below
new Draggable(containers, options)

// eventName: event name as shown below
// listener: callback for events
draggable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
draggable.off(eventName, listener)

// eventName: event name as shown below
draggable.trigger(eventName, event)

// destroy
draggable.destroy()
// options
draggable: '.draggable-source',
handle: null, // css selector for a handle element
delay: 0,
placedTimeout: 800,
native: false,
plugins: [Mirror, Accessibility],
classes: {
  'container:dragging': 'draggable-container--is-dragging',
  'source:dragging': 'draggable-source--is-dragging',
  'source:placed': 'draggable-source--placed',
  'container:placed': 'draggable-container--placed',
  'body:dragging': 'draggable--is-dragging',
  'draggable:over': 'draggable--over',
  'container:over': 'draggable-container--over',
  mirror: 'draggable-mirror',
},
// events

draggable.on('drag:start', function(){
  // ...
})

draggable.on('drag:move', function(){
  // ...
})

draggable.on('drag:over', function(){
  // ...
})

draggable.on('drag:over:container', function(){
  // ...
})

draggable.on('drag:out', function(){
  // ...
})

draggable.on('drag:out:container', function(){
  // ...
})

draggable.on('drag:stop', function(){
  // ...
})

draggable.on('drag:pressure', function(){
  // ...
})

draggable.on('mirror:created', function(){
  // ...
})

draggable.on('mirror:attached', function(){
  // ...
})

draggable.on('mirror:move', function(){
  // ...
})

Sortable API, options, and events.

// containers: specify the containers that hold Sortable items
// options: an array of options as shown below
new Sortable(containers, options)

// eventName: event name as shown below
// listener: callback for events
Sortable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
Sortable.off(eventName, listener)

// eventName: event name as shown below
Sortable.trigger(eventName, event)

// destroy
Sortable.destroy()
// events
Sortable.on('sortable:start', function(){
 // ...
})

Sortable.on('sortable:sorted', function(){
 // ...
})

Sortable.on('sortable:stop', function(){
 // ...
})

Swappable API, options, and events.

// containers: specify the containers that hold Swappable items
// options: an array of options as shown below
new Swappable(containers, options)

// eventName: event name as shown below
// listener: callback for events
Swappable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
Swappable.off(eventName, listener)

// eventName: event name as shown below
Swappable.trigger(eventName, event)

// destroy
Swappable.destroy()

Droppable API, options and events.

// containers: specify the containers that hold Droppable items
// options: an array of options as shown below
new Droppable(containers, options)

// eventName: event name as shown below
// listener: callback for events
Droppable.on(eventName, listener)

// eventName: event name as shown below
// listener: callback for events
Droppable.off(eventName, listener)

// eventName: event name as shown below
Droppable.trigger(eventName, event)

// destroy
Droppable.destroy()
// events
Droppable.on('droppable:over', function(){
  // ...
})

Droppable.on('droppable:out', function(){
  // ...
})

Changelog:

v1.0.0-beta8 (09/08/2018)

  • Announcement plugin to use textContent instead of innerHTML

v1.0.0-beta7 (06/10/2018)

  • Added ResizeMirror plugin
  • Fixed native drag events with draggable
  • Fixed mouse position bug in scrollable
  • Fix initial drag move event

You Might Be Interested In:


Leave a Reply