Element is being dragged.
No CSS :dragging pseudo-class exists — drag the card to fire the real dragstart listener, or force the look above.
<div class="drg-demo">
<div class="drg-card" style="--accent:#BFD9F2;--tilt:-2deg;" draggable="true" ondragstart="this.classList.add('drg-card--live')" ondragend="this.classList.remove('drg-card--live')">
<svg class="drg-card__handle" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><circle cx="8" cy="6" r="2" fill="currentColor"/><circle cx="8" cy="12" r="2" fill="currentColor"/><circle cx="8" cy="18" r="2" fill="currentColor"/><circle cx="16" cy="6" r="2" fill="currentColor"/><circle cx="16" cy="12" r="2" fill="currentColor"/><circle cx="16" cy="18" r="2" fill="currentColor"/></svg>
Task card
</div>
<p class="drg-demo__hint">No CSS <code>:dragging</code> pseudo-class exists — drag the card to fire the real <code>dragstart</code> listener, or force the look above.</p>
</div>
<style>
.drg-demo { width: 260px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }
.drg-card { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1.5px solid #24143020; cursor: grab; }
.drg-card__handle { color: var(--accent); flex-shrink: 0; }
.drg-card--live, .drg-card--forced { opacity: .5; transform: rotate(var(--tilt)) scale(1.03); box-shadow: 0 10px 20px rgba(36,20,48,.2); cursor: grabbing; }
.drg-demo__hint { margin: 12px 0 0; font-size: 11px; color: #241430888; }
.drg-demo__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style><div class="w-[260px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl">
<div class="drg-tw-card flex items-center gap-2 font-semibold px-4 py-3.5 rounded-[10px] bg-white border-[1.5px] border-[#24143020] cursor-grab" style="--tilt:-2deg;" draggable="true" ondragstart="this.classList.add('drg-tw-card--live')" ondragend="this.classList.remove('drg-tw-card--live')">
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" style="color:#BFD9F2"><circle cx="8" cy="6" r="2" fill="currentColor"/><circle cx="8" cy="12" r="2" fill="currentColor"/><circle cx="8" cy="18" r="2" fill="currentColor"/><circle cx="16" cy="6" r="2" fill="currentColor"/><circle cx="16" cy="12" r="2" fill="currentColor"/><circle cx="16" cy="18" r="2" fill="currentColor"/></svg>
Task card
</div>
<p class="m-0 mt-3 text-[11px] text-[#241430]/55">No CSS <code class="bg-[#24143012] px-1.5 py-0.5 rounded">:dragging</code> pseudo-class exists — drag the card to fire the real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">dragstart</code> listener, or force the look above.</p>
</div>
<style>
.drg-tw-card--live, .drg-tw-card--forced { opacity: .5; transform: rotate(var(--tilt)) scale(1.03); box-shadow: 0 10px 20px rgba(36,20,48,.2); cursor: grabbing; }
</style>import { useState } from "react";
export function DraggingState({
label = "Task card",
accent = "#BFD9F2",
force = false,
tilt = -2,
}) {
const [live, setLive] = useState(false);
const dragging = force || live;
return (
<div style={{ width: 260, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12 }}>
<div
draggable
onDragStart={() => setLive(true)}
onDragEnd={() => setLive(false)}
style={{
display: "flex", alignItems: "center", gap: 8, fontWeight: 600, padding: "14px 16px", borderRadius: 10,
background: "#fff", border: "1.5px solid #24143020", cursor: dragging ? "grabbing" : "grab",
opacity: dragging ? 0.5 : 1, transform: dragging ? `rotate(${tilt}deg) scale(1.03)` : "none",
boxShadow: dragging ? "0 10px 20px rgba(36,20,48,.2)" : "none",
}}
>
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" style={{ color: accent, flexShrink: 0 }}>
<circle cx="8" cy="6" r="2" fill="currentColor" /><circle cx="8" cy="12" r="2" fill="currentColor" /><circle cx="8" cy="18" r="2" fill="currentColor" />
<circle cx="16" cy="6" r="2" fill="currentColor" /><circle cx="16" cy="12" r="2" fill="currentColor" /><circle cx="16" cy="18" r="2" fill="currentColor" />
</svg>
{label}
</div>
<p style={{ margin: "12px 0 0", fontSize: 11, color: "#241430888" }}>No CSS <code>:dragging</code> pseudo-class exists — drag the card to fire real drag events, or force the look with the <code>force</code> prop.</p>
</div>
);
}