Back to Slidev

Draggable Elements

skills/slidev/references/layout-draggable.md

52.15.2781 B
Original Source

Draggable Elements

Move, resize, and rotate elements by dragging during presentation.

Directive Usage

With Frontmatter Position

md
---
dragPos:
  square: Left,Top,Width,Height,Rotate
---


Inline Position

md

Component Usage

md
---
dragPos:
  foo: Left,Top,Width,Height,Rotate
---

<v-drag pos="foo" text-3xl>
  Draggable content
</v-drag>

Draggable Arrow

md
<v-drag-arrow />

Controls

  • Double-click: Start dragging
  • Arrow keys: Move element
  • Shift + drag: Preserve aspect ratio
  • Click outside: Stop dragging

Auto Height

Set Height to NaN or _ for auto height based on content.