JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<div id="nestedDemo" class="list-group col nested-sortable">
  <div class="list-group-item nested-1" style="">Item 1.1
    <div class="list-group nested-sortable">
      <div class="list-group-item nested-2" style="">Item 2.1</div>
      <div class="list-group-item nested-2" style="">Item 2.2
        <div class="list-group nested-sortable">
          <div class="list-group-item nested-3" style="">Item 3.1</div>
          <div class="list-group-item nested-3" style="">Item 3.2</div>
          <div class="list-group-item nested-3" style="">Item 3.3</div>

          <div class="list-group-item nested-3" draggable="false" style="">Item 3.4</div>
        </div>
      </div>
      <div class="list-group-item nested-2" style="">Item 2.3</div>
      <div class="list-group-item nested-2" style="">Item 2.4</div>
    </div>
  </div>
  <div class="list-group-item nested-1" style="">Item 1.2</div>
  <div class="list-group-item nested-1">Item 1.3</div>
  <div class="list-group-item nested-1" style="">Item 1.4
    <div class="list-group nested-sortable">
      <div class="list-group-item nested-2" style="" draggable="false">Item 2.1</div>
      <div class="list-group-item nested-2" draggable="false" style="">Item 2.4</div>
      <div class="list-group-item nested-2" style="">Item 2.2</div>
      <div class="list-group-item nested-2" style="">Item 2.3</div>

    </div>
  </div>
  <div class="list-group-item nested-1" style="">Item 1.5</div>
</div>

CSS

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.nested-sortable,
.nested-1,
.nested-2,
.nested-3 {
  margin-top: 5px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 0;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
}

JavaScript

var nestedSortables = document.getElementsByClassName('nested-sortable');

// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
	new Sortable(nestedSortables[i], {
		group: 'nested',
		animation: 150,
		fallbackOnBody: true,
		swapThreshold: 0.65
	});
}