Reorder Grid
A copy-paste drag & drop component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Drag & DropHTMLCSSany framework
1
2
3
4
5
6
Copy into your project
HTML
<!-- Reorder Grid — set .is-dragging on the active item, .is-shifted on
items that move out of the way -->
<div class="nuda-reorder">
<div class="nuda-reorder__cell"><span>1</span></div>
<div class="nuda-reorder__cell"><span>2</span></div>
<div class="nuda-reorder__cell is-dragging"><span>3</span></div>
<div class="nuda-reorder__cell"><span>4</span></div>
<div class="nuda-reorder__cell is-shifted"><span>5</span></div>
<div class="nuda-reorder__cell"><span>6</span></div>
</div>CSS
/* Reorder Grid
Image-grid style reorder: dragging cell lifts + tilts, neighbors slide.
Customize: --rg-accent */
.nuda-reorder {
--rg-accent: #e4ff54;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
width: 100%;
max-width: 240px;
padding: 8px;
}
.nuda-reorder__cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
cursor: grab;
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.25s,
border-color 0.25s,
box-shadow 0.25s;
}
.nuda-reorder__cell:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(228, 255, 84, 0.2);
}
.nuda-reorder__cell span {
font: 700 0.875rem ui-sans-serif, system-ui, sans-serif;
color: #fafafa;
}
.nuda-reorder__cell.is-shifted {
transform: translateX(-12%);
opacity: 0.6;
}
.nuda-reorder__cell.is-dragging {
background: rgba(228, 255, 84, 0.08);
border-color: var(--rg-accent);
transform: scale(1.06) rotate(-2deg);
box-shadow:
0 8px 20px -4px rgba(228, 255, 84, 0.4),
0 4px 8px rgba(0, 0, 0, 0.3);
z-index: 10;
cursor: grabbing;
}
.nuda-reorder__cell.is-dragging span { color: var(--rg-accent); }How to use Reorder Grid
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.