Sortable List Plugin. Sub-tree and mobile touch support.
Requirements: jquery plugin, ul struct with span inside li for content. Include css and js sorter plugin.
First, we need to include JQuery
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
We need include css theme file
<link rel="stylesheet" href="css/theme-default.css">
And js plugin file
<script src="js/amigo-sorter.js"></script>
This struct for simple sortable list
<ul class="sorter">
<li>
<span>First Item</span>
</li>
<li>
<span>Second Item</span>
</li>
</ul>
Various limitations!!! For content inside li tags require using span tag.
Font color, background color, paddings etc we can change in theme-default.scss and compile with sass.
Don't forget to call plugin for ul container
<script>
$( function() {
$('ul.sorter').amigoSorter();
});
</script>
onTouchStart : function() {}, onTouchMove : function() {}, onTouchEnd : function() {}
<script>
$( function() {
$('ul.sorter').amigoSorter({
onTouchEnd : function() { console.log('drag finish event'); }
});
});
</script>