Touch-friendly Draggable & Sortable Plugin - jQuery Touch-dnd
File Size: | 14.4 KB |
---|---|
Views Total: | 14563 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.