SortableJS Sortable List Example

by greatCar

HTML

<!doctype html>
    <!-- SortableJS CDN
    https://github.com/solodev/sortable-lists-with-sortablejs
    -->
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <!-- SortableJS CDN -->
    <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
    <title>Creating Sortable Lists with SortableJS</title>
  </head>
  <body>
    <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>

    <script>
      new Sortable(sortablelist, {
    animation: 150,
    ghostClass: 'blue-background-class'
});
   ...

CSS

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

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