Create Smooth Draggable Lists - jQuery awesomeReorder

File Size: 6.63 KB
Views Total: 1299
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Smooth Draggable Lists - jQuery awesomeReorder

awesomeReorder is a jQuery draggable list plugin that allows drag-and-drop sorting of HTML lists based on jQuery UI's draggable functionality.

Fully configurable and supports scrollable HTML lists. 

How to use it:

1. Load the jQuery awesomeReorder plugin after jQuery and jQuery UI.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jjquery-ui.min.js"></script>
<script src="jquery.awesomereorder.js"></script>

2. Attach the function awesomereorder to the target HTML list and done.

<ul class="example">
  <li><strong>1.</strong> one</li>
  <li><strong>2.</strong> two</li>
  <li><strong>3.</strong> three</li>
  <li><strong>4.</strong> four</li>
  <li><strong>5.</strong> five</li>

3. Determine the direction of the HTML list. Default: auto.

  directionType: 'v' // or 'h'

4. Override the default Drag function. Default: null.

  drag: function(event, ui){
    var currentPosition = { left: ui.offset.left, top: };
    lastPosition = currentPosition;

    if (typeof localOptions.drag == 'function') localOptions.drag(event, ui);

5. Execute functions when the drag starts and stops.

  start: null,
  stop: null

6. Pass the jQuery UI Draggable's options to the awesomeReorder.

  uiDraggableDefaults: {
    containment: 'parent',
    distance: 5,
    opacity: 0.8

7. More configuration options.

  activeRange: 0.3,
  andleSelector: '.',
  listItemSelector: 'li',
  scrollCurve: 3, // eases the edge of of the scrolling zone
  scrollMargin: 40, // in px
  scrollSpeed: 25, // maximum, in px; will be scaled according to distance

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