wtf is visual-drag-demo?

visual-drag-demo is a teaching project showing how to build the front-end of a low-code page editor. A low-code editor lets users assemble a page by dragging components onto a canvas rather than writing code. This project is built with Vue and is meant as a learning resource, with accompanying technical articles that explain how each feature works. The canvas includes a set of built-in component types: text blocks, images, rectangles, circles, straight lines, stars, triangles, buttons, and tables. Users can drag any component onto the canvas, resize it by dragging its handles, rotate it, and reposition it anywhere on the page. Multiple components can be selected and grouped into a single unit, then split apart again later. Individual components can also be locked to prevent accidental moves. The editor supports undo and redo, copy, paste, and cut. Components snap to a grid to help with alignment, and layer order can be adjusted to control which component appears in front of another. Property panels allow each component's visual style to be customized. JavaScript events and CSS animations can be bound to components from within the editor, and external API endpoints can be connected to supply component data. A preview mode lets the user see the finished page, and the layout can be exported as generated code. The README links to five technical articles in Chinese that walk through the implementation principles behind each major feature, including animated diagrams. The project is licensed under MIT and is set up as a standard npm project.