Smooth Drag To Sort Plugin For jQuery - dragSort.js

dragSort.js is a small jQuery plugin that provides the ability to smoothly re-sort grouped elements using drag and drop. Without the need of jQuery UI draggable widget.

How to use it:

1. Insert jQuery library and the jQuery dragSort.js script into your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.dragsort.js"></script>

2. Insert a group of elements to a container element.

<div id="box">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  ...
</div>

3. Call the function on the top container.

$('#box').dragsort({
  // options here
});

4. All possible plugin options with default values.

$('#box').dragsort({

  draggableItemClass:false,
  draggableAreaClass:false,

  placeholderClass:'',
  active: true,
  axis: false,
  resetTime:300,
  drop_exchange:1,

  collision_grid:false,
  collision_grid_width:100,
  show_collision_grid:0
  
});

5. Callback functions.

$('#box').dragsort({

  onDrag:function(dragged_item){
    // ...
  },

  onDragStart:function(dragged_item){
    // ...
  },

  onContact:function(dragged_item){
    // ...
  },

  onExchange:function(dragged_item,change_item){
    // ...
  },

  onDrop:function(result_item){
    // ...
  },
  
  onDragEnd:function(){
    // ...
  }

});

---

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