Creating Sortable Lists with SortableJS

SortableJS allows your users to reorder items in an unordered lists, giving users a visual dimension to specific actions and modifications.

by firegroove

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
 <div class="container">
   <div class="row">
     <div class="col-sm-9 col-xl-10 order-2 order-sm-1 mt-3">
       <h2 class="h6"><strong>Sortable List</strong></h2>
       <div id="sortablelist" class="list-group mb-4 mt-3" data-id="1">
         <div class="list-group-item d-flex align-items-center justify-content-between" data-id="2">
           <div>
             <p class="mb-0 d-inline-flex align-items-center">
               List Item 1</p>
           </div>
         </div>
         <div class="list-group-item d-flex align-items-center justify-content-between" data-id="3">
           <div>
             <p class="mb-0 d-inline-flex align-items-center">
               List Item 2</p>
           </div>
         </div>
         <div class="list-group-item d-flex align-items-center justify-content-between" data-id="4" style="">
           <div>
             <p class="mb-0 d-inline-flex align-items-center">
               List Item 3</p>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

CSS

.list-group .list-group-item {
  border-radius: 0;
  cursor: move;
}

.list-group .list-group-item:hover {
  background-color: #f7f7f7;
}

JavaScript

new Sortable(sortablelist, {
   animation: 150,
   ghostClass: 'sortable-ghost'
 });