<div class="container py-5 d-flex justify-content-center">
  <div class="card bsdrag-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Priority order</h6>
      <ul class="list-unstyled mb-0" id="bsdragList"></ul>
      <p class="small text-muted mt-2 mb-0">Drag the handle to reorder.</p>
    </div>
  </div>
</div>

.bsdrag-card { width: 340px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsdrag-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-radius: 8px; background: #fff; margin-bottom: 4px; border: 1px solid #eceef1;
}
.bsdrag-handle { cursor: grab; color: #9ca3af; font-size: 14px; user-select: none; }
.bsdrag-row.bsdrag-dragging { opacity: .4; }
.bsdrag-row.bsdrag-over { border-top: 2px solid #6366f1; }
.bsdrag-rank { font: 700 11px ui-monospace, monospace; color: #9ca3af; width: 16px; }

let items = [
  { id: 1, text: 'Fix checkout bug' },
  { id: 2, text: 'Ship dark mode' },
  { id: 3, text: 'Write Q3 report' },
  { id: 4, text: 'Onboard new hire' },
];

const list = document.getElementById('bsdragList');
let draggedId = null;

function render() {
  list.innerHTML = items.map((item, i) =>
    '<li class="bsdrag-row" draggable="true" data-id="' + item.id + '">' +
      '<span class="bsdrag-handle">&#9776;</span>' +
      '<span class="bsdrag-rank">' + (i + 1) + '</span>' +
      '<span>' + item.text + '</span>' +
    '</li>'
  ).join('');
}

list.addEventListener('dragstart', e => {
  const row = e.target.closest('.bsdrag-row');
  if (!row) return;
  draggedId = Number(row.dataset.id);
  row.classList.add('bsdrag-dragging');
  e.dataTransfer.effectAllowed = 'move';
});

list.addEventListener('dragend', () => {
  document.querySelectorAll('.bsdrag-row').forEach(r => r.classList.remove('bsdrag-dragging', 'bsdrag-over'));
  draggedId = null;
});

list.addEventListener('dragover', e => {
  // Required: without preventDefault() here, the browser refuses the drop
  // entirely and no "drop" event ever fires on this element.
  e.preventDefault();
  const row = e.target.closest('.bsdrag-row');
  document.querySelectorAll('.bsdrag-row').forEach(r => r.classList.remove('bsdrag-over'));
  if (row && Number(row.dataset.id) !== draggedId) row.classList.add('bsdrag-over');
});

list.addEventListener('drop', e => {
  e.preventDefault();
  const targetRow = e.target.closest('.bsdrag-row');
  if (!targetRow || draggedId === null) return;
  const targetId = Number(targetRow.dataset.id);
  if (targetId === draggedId) return;

  const fromIndex = items.findIndex(i => i.id === draggedId);
  const toIndex = items.findIndex(i => i.id === targetId);
  const [moved] = items.splice(fromIndex, 1);
  items.splice(toIndex, 0, moved);
  render();
});

render();