Simple Touch-enabled List Sorting Plugin with jQuery - Sordid Dragon

File Size: 50.5 KB
Views Total: 1654
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Touch-enabled List Sorting Plugin with jQuery - Sordid Dragon

Sordid Dragon is a simple, cross-device jQuery plugin which enables items in a list to be sorted vertically using mouse drag or finger move.

See also:

How to use it:

1. Load jQuery library together with jQuery Migrate plugin and sordid-dragon.jquery.js script in your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="sordid-dragon.jquery.js"></script>

2. Call the .sordidDragon() function on where you wish to implement the list sorting functionality.

$(".list").sordidDragon()

3. That's it. The destroy method to remove all event listeners.

$(".list").sordidDragon("destroy");

4. Default plugin settings.

  • handle: $(element).children(): Change where you want the dragger handle to be. Defaults to the whole children element.
  • childSelector: $(element).children(): To only allow a subset of the child elements to be dragged.  NOTE: If a child element excluded by childSelector is in the middle of the list, you will be able to drag items from above it to below it or vice versa. However, if the child element excluded by childSelector is at the beginning or end of the list, you will not be able to drag items above/below it.
  • ghostContainer: $(element): Change where you want to append the ghost element when the user is dragging the element.
  • sortStart: function(event, element): Called when an element starts to be moved.
  • sortEnd: function(event, element): Called when an element has stopped being moved.

Change logs:

v2.2.1 (2016-10-31)

  • Add sortStart event
  • Fixes the fixed positioned ghost elements inside contain parent elements that have CSS transform attributes applied to them. 
  • Bump version and sync npm/bower

v2.0.1 (2016-03-29)

  • Remove IE8 & IE9 support
  • Fix bug when sordidDragon is re-enabled during an in-progress drag
  • fix bower warning

2015-04-29

  • v1.3.1

2015-01-17

  • Add option for removing event listeners

2015-01-13

  • Fix IE8/IE9 support

2015-01-09

  • Fix off-by-one error in touch events
  • Bugfix: Touch event without drag removes element

2014-12-22

  • Fix & document MS Surface edge case bug

2014-12-22

  • Basic support for items of different heights

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