JSFiddle - React, Tailwind, and code Playground

by Andrew Warren

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.7/draggable.bundle.js"></script>
<div class="mycontainer">
<p>
Bare Metal
</p>
  <div class="item draggable">Apple</div>
  <div class="item draggable">Banana</div>
  <div class="mycontainer draggable">
    <div class="item draggable">Lemon</div>
    <div class="item draggable">Cherry</div>
  </div>
    <div class="mycontainer draggable">
    <div class="item draggable">Fabric > Access Policies > Interfaces > Leaf Interfaces > Policy Groups > Leaf Access Port > Create Leaf Access Port Policy Group</div>
    <div class="item draggable">Fabric > Access Policies > Policies > Global > Attachable Access Entity Profile > Create Attachable Access Entity Profile</div>
  </div>
    <div class="mycontainer draggable">
    <div class="item draggable">Fabric > Access Policies > Physical and External Domains > Create Physical Domain</div>
    <div class="item draggable">Fabric > Access Policies > Pools > VLAN > Create VLAN Pool</div>
  </div>
    <div class="mycontainer draggable">
    <div class="item draggable">Lemon</div>
    <div class="item draggable">Cherry</div>
  </div>
</div>

CSS

.draggable {
  cursor: move;
}

.mycontainer {
  padding: 10px;
  background: powderblue;
  border: 2px solid steelblue;
}

.mycontainer>* {
  margin-top: 10px;
}

.item {
  padding: 10px;
  background: mistyrose;
  border: 2px solid steelblue;
}

.mycontainer .draggable-source--is-dragging {
  background: #666;
  color: #666;
}

.mycontainer .draggable-source--is-dragging>* {
  visibility: hidden;
}

JavaScript

const sortable = new Draggable.Sortable(document.querySelectorAll(".mycontainer"), {
  draggable: ".draggable",
  mirror: {
    constrainDimensions: true
  }
})