feat: draggable element

[KermanX]

This PR implements a <v-drag> component:

<v-drag pos="451,398,239,48">
draggable box
<img ... >
</v-drag>

Outdated. Please check the docs for the usage.

Then you can double-click the element in the slide, and then drag it to resize and move it. The pos prop will be auto-updated. Clicking outside the currently active fixed element will stop the dragging.

Initially, you don't need to specify the pos prop, which will be auto-generated on the first drag.

The format of pos is left,top,width,height,rotate. rotate is omitted when it is 0.

Press shift when resizing, the aspect ratio will be fixed.

You can also use arrow keys to move the element.

About HMR

In the following situations, the new position will be written back to the Markdown:

• Dragged && debounce(500)
• Click outside the element to stop dragging
• The window lost its focus

However, there are still some restrictions:

• When dragging pos isn't saved yet, modifying the Markdown file via the external editor will cause UB. In most cases, this would not happen because the window will lose its focus when you switch to the code editor.
• Multi-user editing at the same time will cause UB.

Todos

• Documentation. I will work on this after the functions get approved.
• Find a way to support <v-drag ... in code block or comment. Currently, the writing back is based on the index of regex match.
• Allow width and height to be auto.

Notes

It would be better if we could use v-fixed as a directive, but I don't know how to do this.

The behavior is mostly learned from Figma.

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	44f04e9
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/6615f42d7293630008371631
😎 Deploy Preview	https://deploy-preview-1402--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[KermanX]

Is there any possibility we can use VDrag as a directive? It seems that directives cannot render new elements...

[antfu]

Yeah I was thinking about that, having a directive would be nice but I guess it will not be easy to do. We could leave it for the future