Skip to main content

Example

The demo application demonstrates how to integrate various ngx-builder-dnd features to create a useful drag-and-drop editor. You can examine the code and engage with it in real time because it runs directly on StackBlitz.

Live Demo​

If the embed does not load in your browser, you can Open in StackBlitz

What the Demo Shows​

  • There are two kinds of draggable objects

    • Structure items: accepts other blocks as children.
    • Content blocks: can be positioned inside structural elements.

  • Nested drop zones

    • Structures: serve as top-level containers that can only take sub-structures. Each structure in the demo has one or more sub-structure slots that are hard-coded; you can copy or remove them to the slots that are available.
    • Sub-structures: areas that take blocks and lives inside structures. Blocks are stored and organized by sub-structures, allowing structures to control layout while sub-structures take care of block placement.

  • Rich interactions

    • For a more seamless editing experience, every block has action buttons, drop indicators, and hover states.
Next Steps

Explore the demo source to adapt it for your project, or dive into the API Reference to learn how to extend these patterns.