Skip to content

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

License

Notifications You must be signed in to change notification settings

maoyiluo/interactive-blocks

 
 

Repository files navigation

@lyonbot/interactive-blocks

GitHub Workflow Status npm npm bundle size (version) npm bundle size (version) npm type definitions

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

[ ▶️ Try the Demo ] [ 📁 View on GitHub ] [ 📖 Document ]

How Interactive?

  • (multiple) selectable!
  • copy and paste! with system clipboard
  • keyboard shortcuts!
  • drag and drop! (optional)

These keyboard shortcuts are supported!

  • Ctrl+X, Ctrl+C, Ctrl+V
  • Navigate with arrow keys
  • Select multiple blocks with Shift + arrow keys
  • Select all blocks with Ctrl+A
  • Delete, Backspace

How to Integrate

This lib works with any framework, including React and Vue. Example is written with React.

📖 Read document with Docsify

About

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.2%
  • Stylus 2.6%
  • Vue 2.2%
  • JavaScript 1.6%
  • SCSS 1.5%
  • HTML 0.9%