Edit Drag

Name

Also known as (comma separated)

Brief definition Move an object while holding pointer.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Card label", "default": "Design review" }, { "id": "dragging", "type": "toggle", "label": "Mid-drag", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "rotation", "type": "number", "label": "Tilt (deg)", "default": 4, "min": 0, "max": 10, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"drag-demo\">\n <div class=\"drag-demo__lane\">Backlog</div>\n <div class=\"drag-demo__card{{#if dragging}} is-dragging{{/if}}\" style=\"--accent:{{accent}};--rot:{{rotation}}deg;\" draggable=\"true\">\n <span class=\"drag-demo__handle\">&#8942;&#8942;</span>{{label}}\n </div>\n <p class=\"drag-demo__caption\">{{#if dragging}}shown mid-drag: lifted, rotated {{rotation}}&deg;, shadow deepens{{/if}}{{unless dragging}}rest state &mdash; drag the handle to move it{{/unless}}</p>\n</div>\n<style>\n.drag-demo { width: 280px; font: 14px system-ui, sans-serif; color: #241430; }\n.drag-demo__lane { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #241430aa; margin-bottom: 8px; }\n.drag-demo__card { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #FAF7F2; border: 1.5px solid var(--accent); box-shadow: 0 2px 6px rgba(36,20,48,.1); cursor: grab; }\n@media (prefers-reduced-motion: no-preference) {\n.drag-demo__card { transition: transform .12s, box-shadow .12s; }\n}\n.drag-demo__card.is-dragging { transform: rotate(var(--rot)) scale(1.03); box-shadow: 0 16px 30px rgba(36,20,48,.28); cursor: grabbing; }\n.drag-demo__handle { color: var(--accent); letter-spacing: -3px; font-weight: 700; }\n.drag-demo__caption { margin-top: 12px; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<div style=\"width:280px;font-family:system-ui,sans-serif;color:#241430\">\n <div class=\"text-[11px] font-bold uppercase tracking-wide text-[#241430aa] mb-2\">Backlog</div>\n <div draggable=\"true\" class=\"drag-tw{{#if dragging}} is-dragging{{/if}} flex items-center gap-2 px-3.5 py-3 rounded-lg cursor-grab motion-safe:transition-transform\" style=\"background:#FAF7F2;border:1.5px solid {{accent}};box-shadow:0 2px 6px rgba(36,20,48,.1);--rot:{{rotation}}deg\">\n <span class=\"font-bold tracking-tighter\" style=\"color:{{accent}}\">&#8942;&#8942;</span>{{label}}\n </div>\n <p class=\"mt-3 text-xs text-[#241430aa]\">{{#if dragging}}shown mid-drag: lifted, rotated {{rotation}}&deg;, shadow deepens{{/if}}{{unless dragging}}rest state &mdash; drag the handle to move it{{/unless}}</p>\n</div>\n<style>\n.drag-tw.is-dragging { transform: rotate(var(--rot)) scale(1.03); box-shadow: 0 16px 30px rgba(36,20,48,.28); cursor: grabbing; }\n</style>", "react": "export function DragDemo({\n label = \"{{label}}\",\n dragging = {{dragging}},\n accent = \"{{accent}}\",\n rotation = {{rotation}},\n}) {\n return (\n <div style={{ width: 280, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <div style={{ fontSize: 11, fontWeight: 700, textTransform: \"uppercase\", letterSpacing: \".04em\", color: \"#241430aa\", marginBottom: 8 }}>Backlog</div>\n <div draggable className=\"drag-card\" style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: \"12px 14px\", borderRadius: 10, background: \"#FAF7F2\",\n border: \"1.5px solid \" + accent, cursor: dragging ? \"grabbing\" : \"grab\",\n transform: dragging ? \"rotate(\" + rotation + \"deg) scale(1.03)\" : \"none\",\n boxShadow: dragging ? \"0 16px 30px rgba(36,20,48,.28)\" : \"0 2px 6px rgba(36,20,48,.1)\" }}>\n <span style={{ color: accent, letterSpacing: -3, fontWeight: 700 }}>&#8942;&#8942;</span>{label}\n </div>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430aa\" }}>{dragging ? \"shown mid-drag: lifted, rotated \" + rotation + \"\\u00b0, shadow deepens\" : \"rest state \\u2014 drag the handle to move it\"}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .drag-card { transition: transform .12s, box-shadow .12s; }\n }\n `}</style>\n </div>\n );\n}" }