Touch-friendly Draggable & Sortable Plugin - jQuery Touch-dnd

Touch-dnd is a powerful jQuery plugin which provides smooth, touch-enabled drag'n'drop and sortable functionalities on a list or grid using CSS3 transforms and transitions. A great and advanced alternative to the jQuery UI draggable, sortable, and dropppable widgets.

Installation:

# NPM
$ npm install touch-dnd --save

How to use it:

1. Load the latest jQuery (slim build) and the jQuery touch-dnd plugin in the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="touch-dnd.js"></script>

2. Enable the draggable functionality on a list or grid.

<ul class="grid">
  <li class="draggable"></li>
  <li class="draggable"></li>
  <li class="draggable"></li>
  ...
</ul>

$('.draggable').draggable({ 

  // default options
  cancel: 'input, textarea, button, select, option',
  connectWith: false,
  cursor: 'auto',
  disabled: false,
  handle: false,
  initialized: false,
  clone: false,
  cloneClass: '',
  scope: 'default'

})

3. Enable the droppable functionality on a list or grid.

<div class="droppable"></div>
<div class="droppable"></div>
<div class="droppable"></div>
...

$('.droppable').droppable({ 

  // default options
  accept: '*',
  activeClass: '',
  disabled: false,
  hoverClass: '',
  initialized: false,
  scope: 'default',
  receiveHandler: null
  
})

4. Enable the sortable functionality on a list or grid.

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ...
</ul>

$('#list').sortable({ 

  // default options
  accept: '*',
  activeClass: '',
  cancel: 'input, textarea, button, select, option',
  connectWith: false,
  disabled: false,
  forcePlaceholderSize: false,
  handle: false,
  initialized: false,
  items: 'li, div',
  placeholder: 'placeholder',
  placeholderTag: null,
  updateHandler: null,
  receiveHandler: null
  
})

5. Event handlers available.

$('.draggable').draggable()
.on('draggable:create', function(e){
  // do somethong
})

$('.draggable').draggable()
.on('draggable:start', function(e, ui){
  // do somethong
})

$('.draggable').draggable()
.on('draggable:stop', function(e, ui){
  // do somethong
})

$('.droppable').droppable()
.on('droppable:activate', function(e, ui){
  // do somethong
})

$('.droppable').droppable()
.on('droppable:create', function(e){
  // do somethong
})

$('.droppable').droppable()
.on('droppable:deactivate', function(e, ui){
  // do somethong
})

$('.droppable').droppable()
.on('droppable:drop', function(e, ui){
  // do somethong
})

$('.droppable').droppable()
.on('droppable:out', function(e, ui){
  // do somethong
})

$('.droppable').droppable()
.on('droppable:over', function(e, ui){
  // do somethong
})

$('.sortable').sortable()
.on('sortable:activate', function(e, ui){
  // do somethong
})

$('.sortable').sortable()
.on('sortable:beforeStop', function(e, ui){
  // do somethong
})

$('.sortable').sortable()
.on('sortable:change', function(e, ui){
  // do somethong
})

$('.sortable').sortable()
.on('sortable:create', function(e){
  // do somethong
})

$('.sortable').sortable()
.on('sortable:deactivate', function(e, ui){
  // do somethong
})

$('.sortable').receive()
.on('sortable:start', function(e, ui){
  // do somethong
})

$('.sortable').receive()
.on('sortable:stop', function(e, ui){
  // do somethong
})

$('.sortable').receive()
.on('sortable:update', function(e, ui){
  // do somethong
})

6. API methods.

// destroy
$('.element').functionName('destroy')

// disable
$('.element').functionName('disable')

// enable
$('.element').functionName('enable')

// gets an object containing key/value pairs
$('.element').functionName('option')

// sets options
$('.element').functionName('option', options)

Changelog:

2018-11-26

• Make touch-dnd usable with common JS module loaders

---

This awesome jQuery plugin is developed by rkusa. For more Advanced Usages, please check the demo page or visit the official website.