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.
Integrate Simple jQuery Sortable List Plugin
Libraries
Include all the required libraries on page with jquery core library.
<link type="text/css" rel="stylesheet" href="css/style.css" /> <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.
JS
Call the function
$(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.
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.