Simple Drag'n'drop List/Grid Sorting Plugin With jQuery - dropMe

dropMe is a very small jQuery plugin which enables your elements in a list/grid to be re-sorted via drag and drop. Without the need of jQuery UI drag and drop widget.

How to use it:

1. Add the jQuery dropMe plugin's CSS files into the head section of the webpage.

<link href="c/dropMe.css" rel="stylesheet">

2. Create a list (or grid) of items to be sorted with mouse.

<ul class="dropme list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

<ul class="dropme grid">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

3. Place jQuery library and the jQuery dropMe plugin's script at the bottom of the webpage, and then enable the plugin on the list/grid.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script> 
<script src="j/dropMe.js"></script> 

$('.dropme').dropme('enable');

4. Use the 'items' options to specify which items should be sorted. It is useful to specify exclude items as follows:

<ul class="dropMe list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li class="disabled">Item 4</li>
  <li class="disabled">Item 5</li>
  <li class="disabled">Item 6</li>
</ul>

$('.dropme').dropme({
  items: ':not(.disabled)'
});

5. You can also set the plugin to drag and drop items between 2 lists.

<ul class="connected list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

<ul class="connected list no2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

$('.connected').dropme({
  linkTo: '.connected'
});

6. Force the drag and drop placeholder to have a height.

$('.connected').dropme({
  replacerSize: true 
});

7. The event that will be triggered after drag and drop.

$('.dropme').dropme().bind('sortupdate', function(e, elm) {
    // do something
});

---

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