Dynamic Sortable List Plugin For jQuery - Reorderable.js

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.