정렬 가능한 목록

<ul class="slw" id="slw">
  <li draggable="true"><i class="slgrip">⋮⋮</i>결제 수단 확인</li>
  <li draggable="true"><i class="slgrip">⋮⋮</i>배송지 입력</li>
  <li draggable="true"><i class="slgrip">⋮⋮</i>주문 검토</li>
  <li draggable="true"><i class="slgrip">⋮⋮</i>최종 결제</li>
</ul>

.slw{list-style:none;margin:0;padding:0;width:min(220px,90%);display:grid;gap:6px}
.slw li{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--fg);cursor:grab;transition:transform .25s,opacity .25s}
.slw li[data-drag]{opacity:.4}
.slgrip{font-style:normal;letter-spacing:-2px;color:var(--muted);font-size:11px}

const list = document.getElementById('slw');
let dragEl = null;
list.querySelectorAll('li').forEach((li) => {
  li.addEventListener('dragstart', () => { auto = false; dragEl = li; li.setAttribute('data-drag', ''); });
  li.addEventListener('dragend', () => li.removeAttribute('data-drag'));
  li.addEventListener('dragover', (e) => {
    e.preventDefault();
    if (!dragEl || dragEl === li) return;
    const rect = li.getBoundingClientRect();
    const before = e.clientY < rect.top + rect.height / 2;
    list.insertBefore(dragEl, before ? li : li.nextSibling);
  });
});
let auto = true;
function swap() {
  if (!auto) return;
  const items = [...list.children];
  const i = Math.floor(Math.random() * (items.length - 1));
  items[i].after(items[i + 1]);
  setTimeout(swap, 1300);
}
setTimeout(swap, 900);