Drag & Drop Sortable Html List with jQuery Waffler Plugin

Waffler is a very lightweight jQuery plugin that enables you to re-sort an Html list using drag and drop. Without jQuery UI drag & drop API.

How to use it:

1. Create an Html list with an unique ID 'waffle' that you want to make it sortable.

<ul id="waffle">

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...

</ul>

2. Load the JQuery library and the jQuery Waffler plugin at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.waffler.js"></script>

3. To initialize the plugin, simply call the plugin after document ready.

$(document).ready(function () {
$(document).waffler();
});

Change log:

2014-06-30

• support multiple wafflers on a single page

---

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