Files
stack/v1/packages/mosaic/framework/skills/slidev/references/layout-draggable.md
T

895 B

name, description
name description
draggable-elements Move, resize, and rotate elements by dragging during presentation

Draggable Elements

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

Directive Usage

With Frontmatter Position

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

<img v-drag="'square'" src="https://sli.dev/logo.png">

Inline Position

<img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png">

Component Usage

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

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

Draggable Arrow

<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.