Amigo Sorter Plugin

Sortable List Plugin. Sub-tree and mobile touch support.

Getting Started

Requirements: jquery plugin, ul struct with span inside li for content. Include css and js sorter plugin.

Demo Page

Prerequisites

First, we need to include JQuery

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 

Installing

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> 

Html sctruct

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> 

Callback Functions

onTouchStart : function() {}, onTouchMove : function() {}, onTouchEnd : function() {}

<script> 	$( function() { 		$('ul.sorter').amigoSorter({ 			onTouchEnd : function() { console.log('drag finish event'); } 		}); 	}); </script>