Canonical inventory
Direct manipulation · specialized
Draggable card
interaction.drag-cardDrag and drop moves or copies an item by carrying a visible representation from a source to a valid target.
draggable cardthe thing you drag somewhere elsedrag and dropmovable cardthe draggable thingthe direct manipulation control
States5
Touch target44px
Evidence6
Introduced by2 kits
Visual specimen
Same contract. Every kit voice.
Translation table
What code calls it.
WebHTML Drag and Drop or Pointer EventsThis component is composed from multiple web primitives.pattern
ARIAapplication-defined interactionNo single ARIA role represents the complete component.pattern
SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy
Every part, named.
- 1Draggable source
- 2Grab handle
- 3Drag preview
- 4Drop target
- 5Insertion indicator
- 6Committed position
Often confused with
Similar shape. Different contract.
Prompt · paste into your agent
Ask for the exact thing.
Implement the canonical Draggable card component (interaction.drag-card). Drag and drop moves or copies an item by carrying a visible representation from a source to a valid target. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.Studio contract
What must be proven.
Required states
default · hover · focus-visible · active · disabled
Required evidence
implementation · state-matrix · responsive · keyboard · touch · reduced-motion
Source union
jade · purple-rain