Simple jQuery Sortable List Plugin

by Posted on

Simple jQuery Sortable List Plugin – Looking for sortable list plugin to arrange list of items as user interest. In this post I am going to share Simple jQuery Sortable List Plugin. This jQuery plugin lets you dynamically create a sortable list where the list items can be reorderable and removable by clicking up, down, and remove buttons.


Simple jQuery Sortable List Plugin

Integrate Simple jQuery Sortable List Plugin

Libraries

Include all the required libraries on page with jquery core library.

<!--CSS-->
<link type="text/css" rel="stylesheet" href="css/style.css" />
 
<!--JS-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

HTML

Create an simple HTML Div container where you want to display dynamic sortable list.

<div class="demo"></div>



JS

Call the function reorderable() on the container element and Pass an array of JavaScript objects with no configuration properties (to invoke default properties) OR choose from the following properties (you can use one or all properties, as required). NOTE: For any property you miss, default property will take place.

$(function() { 
 $('.demo').reorderable([{
				label: "Santa",
				src: "http://www.iconninja.com/files/921/4/840/emoji-happy-emot-santa-smiley-smile-icon.png"
			}, {
				label: "BOX 1",
				backgroundColor: "#571845"
			},
			{
				label: "BOX 2",
				backgroundColor: "#900C3E"
			},
			{
				label: "Lorem Ipsum",
				backgroundColor: "#C70039"
			},
			{
				label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
				backgroundColor: "#FF5733"
			},
			{
				label: "Vestibulum nec est in est efficitur mattis.",
				src: "http://icons.iconarchive.com/icons/graphicloads/food-drink/256/icecream-2-icon.png",
				backgroundColor: "#FFC300"
			},
			{
				label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
				backgroundColor: "#00BBD4"
			},
			{
				label: "Vestibulum nec est in est efficitur mattis.",
				src: "http://icons.iconarchive.com/icons/sonya/swarm/256/Pizza-icon.png",
				backgroundColor: "#CCDB38"
			},
			{
				label: "BOX",
				backgroundColor: "#8CC24A"
			}
		]);
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin