| 1 | --- |
| 2 | tags: [layout] |
| 3 | description: | |
| 4 | Move, resize, and rotate elements by dragging them with the mouse. |
| 5 | --- |
| 6 | |
| 7 | # Draggable Elements |
| 8 | |
| 9 | Draggable elements give you the ability to move, resize, and rotate elements by dragging them with the mouse. This is useful for creating floating elements in your slides. |
| 10 | |
| 11 | ## Directive Usage |
| 12 | |
| 13 | ### Data from the frontmatter |
| 14 | |
| 15 | ```md |
| 16 | --- |
| 17 | dragPos: |
| 18 | square: Left,Top,Width,Height,Rotate |
| 19 | --- |
| 20 | |
| 21 | <img v-drag="'square'" src="https://sli.dev/logo.png"> |
| 22 | ``` |
| 23 | |
| 24 | ### Data from the directive value |
| 25 | |
| 26 | ::: warning |
| 27 | Slidev use regex to update the position value in the slide content. If you meet problems, please use the frontmatter to define the values instead. |
| 28 | ::: |
| 29 | |
| 30 | ```md |
| 31 | <img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png"> |
| 32 | ``` |
| 33 | |
| 34 | ## Component Usage |
| 35 | |
| 36 | ### Data from the frontmatter |
| 37 | |
| 38 | ```md |
| 39 | --- |
| 40 | dragPos: |
| 41 | foo: Left,Top,Width,Height,Rotate |
| 42 | --- |
| 43 | |
| 44 | <v-drag pos="foo" text-3xl> |
| 45 | <div class="i-carbon:arrow-up" /> |
| 46 | Use the `v-drag` component to have a draggable container! |
| 47 | </v-drag> |
| 48 | ``` |
| 49 | |
| 50 | ### Data from props |
| 51 | |
| 52 | ```md |
| 53 | <v-drag pos="Left,Top,Width,Height,Rotate" text-3xl> |
| 54 | <div class="i-carbon:arrow-up" /> |
| 55 | Use the `v-drag` component to have a draggable container! |
| 56 | </v-drag> |
| 57 | ``` |
| 58 | |
| 59 | ## Create a Draggable Element |
| 60 | |
| 61 | When you create a new draggable element, you don't need to specify the position value (but you need to specify the position name if you want to use the frontmatter). Slidev will automatically generate the initial position value for you. |
| 62 | |
| 63 | ## Automatic Height |
| 64 | |
| 65 | You can set `Height` to `NaN` (in) or `_` (if you use the component) to make the height of the draggable element automatically adjust to its content. |
| 66 | |
| 67 | ## Controls |
| 68 | |
| 69 | - Double-click the draggable element to start dragging it. |
| 70 | - You can also use the arrow keys to move the element. |
| 71 | - Hold `Shift` while dragging to preserve its aspect ratio. |
| 72 | - Click outside the draggable element to stop dragging it. |
| 73 | |
| 74 | ## Draggable Arrow |
| 75 | |
| 76 | The `<v-drag-arrow>` component creates a draggable arrow element. Simply use it like this: |
| 77 | |
| 78 | ```md |
| 79 | <v-drag-arrow /> |
| 80 | ``` |
| 81 | |
| 82 | And you will get a draggable arrow element. Other props are the same as [the `Arrow` component](/builtin/components#arrow). |
| 83 |