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>
  ...
</ul>

$(function(){
  $('.example').awesomereorder();
});

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

$('.example').awesomereorder({
  directionType: 'v' // or 'h'
});

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

$('.example').awesomereorder({
  drag: function(event, ui){
    var currentPosition = { left: ui.offset.left, top: ui.offset.top };
    checkScroll(currentPosition);
    checkHover(currentPosition);
    lastPosition = currentPosition;

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

5. Execute functions when the drag starts and stops.

$('.example').awesomereorder({
  start: null,
  stop: null
});

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

$('.example').awesomereorder({
  uiDraggableDefaults: {
    containment: 'parent',
    distance: 5,
    opacity: 0.8
  }
});

7. More configuration options.

$('.example').awesomereorder({
  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.