Bootstrap 5 · Intermediate

Drag-Reorder Team List

A team member list reorderable by drag, via SortableJS.

Requires Bootstrap 5, SortableJS. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:360px"><div class="card-body">
  <h6 class="fw-bold mb-2">Reorder team</h6>
  <ul class="list-group" id="tbList">
    <li class="list-group-item d-flex align-items-center gap-2" style="cursor:grab">⠿ <div class="rounded-circle bg-primary text-white d-grid" style="width:28px;height:28px;place-items:center;font-size:.7rem">A</div> Ava — Lead</li>
    <li class="list-group-item d-flex align-items-center gap-2" style="cursor:grab">⠿ <div class="rounded-circle bg-success text-white d-grid" style="width:28px;height:28px;place-items:center;font-size:.7rem">B</div> Ben — Dev</li>
    <li class="list-group-item d-flex align-items-center gap-2" style="cursor:grab">⠿ <div class="rounded-circle bg-danger text-white d-grid" style="width:28px;height:28px;place-items:center;font-size:.7rem">C</div> Cara — Design</li>
  </ul>
</div></div>

new Sortable(document.getElementById('tbList'),{animation:160,handle:'.list-group-item',ghostClass:'bg-light'});

Free to use.This component uses Bootstrap 5, SortableJS (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.