Pinned, Draggable Browser-Style Tabs — Reorder and Pin Like a Real Browser

Browser tabs are one of the most-used UI patterns on the planet, and users bring very specific expectations from them: tabs can be dragged into any order, and pinning a tab doesn't just style it differently — it *guarantees* it stays leftmost, ahead of every unpinned tab, no matter what. This snippet reproduces both behaviors correctly, along with the keyboard navigation and native draggable API wiring that make it feel like a real tab strip rather than a static row of buttons.

Drag-and-drop uses the native HTML Drag and Drop API, not a library

Every tab has draggable="true", and the reordering logic is built entirely from dragstart, dragover, drop, and dragend events — no external sortable library. dragover must call e.preventDefault() on every fire (this is a common gotcha: without it, the drop event never fires at all, since the browser's default behavior for a dragover is to disallow dropping). The live "which side would this land on" indicator is computed on every dragover by comparing the pointer's clientX to the midpoint of the tab currently being hovered — left half means "drop before this tab," right half means "drop after," giving continuous visual feedback rather than only showing where a drop will land after the fact.

Pinning is a positional guarantee, not just a style

togglePin() doesn't just toggle a CSS class — after flipping the class, it re-sorts every tab in the bar into two groups, pinned first, then unpinned, and re-appends them all in that order. This means pinning a tab that's currently at the far right instantly moves it to sit immediately after the last pinned tab, and unpinning a tab moves it back into the unpinned group — matching exactly how pinning works in Chrome, Firefox, and every other tab-based browser, where "pinned" is fundamentally a positional property, not merely a visual one.

Right-click and a dedicated pin icon both work

The pin toggle is wired to two separate triggers: a contextmenu handler (so right-clicking anywhere on a tab pins/unpins it, matching real browser tab context menus) and a click on the small pin icon itself for discoverability without needing to know the right-click shortcut. Both call the same togglePin() function, so there's exactly one implementation of the pin behavior regardless of which trigger fired it.

Keyboard navigation follows the ARIA tabs pattern

Only the currently selected tab has tabindex="0"; every other tab has tabindex="-1", so a single Tab keypress moves focus into the tab strip once rather than tabbing through every individual tab. Once focus is inside, Arrow Left/Right move focus (and selection) between adjacent tabs — the same roving-tabindex convention used by native OS tab bars and the ARIA Authoring Practices tabs pattern, keeping the whole strip a single stop in the page's overall tab order.