JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js"></script>
<div class="card-body">
  <ul class="list-group sortable">
    <li class="list-group-item">
      First
      <ul class="list-group">
        <li class="list-group-item">
          First Child 1
        </li>
        <li class="list-group-item">
          First Child 2
        </li>
        <li class="list-group-item">
          First Child 3
        </li>
      </ul>
    </li>
    <li class="list-group-item">
      Second
      <ul class="list-group">
        <li class="list-group-item">
          Second Child 1
        </li>
        <li class="list-group-item">
          Second Child 2
        </li>
        <li class="list-group-item">
          Second Child 3
        </li>
      </ul>
    </li>
    <li class="list-group-item">
      Third
      <ul class="list-group">
        <li class="list-group-item">
          Third Child 1
        </li>
        <li class="list-group-item">
          Third Child 2
        </li>
        <li class="list-group-item">
          Third Child 3
        </li>
      </ul>
    </li>
  </ul>

CSS

body.dragging,
body.dragging * {
  cursor: move !important;
}

.list-group {
  margin-top: 10px;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ul.sortable li.placeholder {
  position: relative;
  /** More li styles **/
}

ul.sortable li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}

JavaScript

$(function() {
  $("ul.sortable").sortable({
  });
});