<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="drag-drop"> <li> <div class="row"> <div class="col">List</div> <div class="col-auto"><div class="drag-cursor"><i class="fas fa-align-justify"></i></div></i> </div> </div> </li> <li> <div class="row"> <div class="col">List</div> <div class="col-auto"><div class="drag-cursor"><i class="fas fa-align-justify"></i></div></i> </div> </div> </li> <li> <div class="row"> <div class="col">List</div> <div class="col-auto"><div class="drag-cursor"><i class="fas fa-align-justify"></i></div></i> </div> </div> </li> <li> <div class="row"> <div class="col">List</div> <div class="col-auto"><div class="drag-cursor"><i class="fas fa-align-justify"></i></div></i> </div> </div> </li> <li> <div class="row"> <div class="col">List</div> <div class="col-auto"><div class="drag-cursor"><i class="fas fa-align-justify"></i></div></i> </div> </div> </li> </ul> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

body { padding: 30px; } ul { margin: 0; padding: 0; } ul li { margin: 10px 0; display: block; padding: 10px 20px; color: white; border: 1px solid grey; background: grey; border-radius: 10px; } .drag-cursor {cursor: pointer;}

$('.drag-drop').sortable({ handle: '.drag-cursor'});