
The Reorderable.js 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.
1. Create an empty container element in which you want to render the dynamic sortable list.
<div class="example"> </div>
2. Place the plugin's main JavaScript file after jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="js/main.js"></script>
3. Call the function reorderable()
on the container element and define an array of list items as follows:
$('.example').reorderable([ { label: "Lable 1", src: "icon-1.png" }, { label: "Lable 2", backgroundColor: "#571845" }, { label: "Lable 3", backgroundColor: "#900C3E" }, { label: "Lable 4", backgroundColor: "#C70039" }, { label: "Lable 5", backgroundColor: "#FF5733" } ]);
4. The necessary CSS styles for the sortable list.
.reorderable-ul{ padding-top: 20px; padding-bottom: 20px; } .reorderable-li { position: relative; max-width: 300px; list-style: none; border: 1px solid #ccc; height: 40px; box-sizing: border-box; padding: 9px; margin: 10px; } .left { text-align: center; font-size: 14px; text-align: left; width: calc(100% - 60px); height: 100%; float: left; } .info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 20px; } .info img { float: left; margin-right: 10px; } .right { width: 55px; float: right; margin-right: 5px; } .right a { line-height: 20px; text-decoration: none; float:right; margin-right: 5px; }
5. The default options of the list item.
{ // text color color: "#424242", // background color backgroundColor:"#fff", // label text label:"", // default image src:"img/smiley.png" }
This awesome jQuery plugin is developed by shayansulehri. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 08.05.2018
- Source