DND

Bolt's drag-and-drop (DND) configuration has two main parts: Navigation DND and Layout DND.

Navigation DND

In Navigation DND, there are three components: Navbar, Navigation Group, and Navigation Item. Each component can be sorted if a setting called block_setting.js has a specific property set to true. If the property is true, the component becomes sortable.

⁠

There are three handlers for controlling the DND process:

⁠

There are three handlers for controlling the DND process:

1. HandleDragStart

handleDragStart (found in src/components/playground/index.js):

This handler selects the active block to display it while dragging in the DragOverlay.

⁠

2. Handle Drag Over

handleDragOver (found in src/components/playground/index.js):

This handler checks if the active block can be placed in the target container block (Droppable block) based on certain properties in the block_setting. If it's acceptable, the parent of the active block is changed to the target container block, resulting in the block moving to a different section while dragging.

⁠

3. Handle Drag End

handleDragEnd (found in src/components/playground/index.js):

This handler is used to rearrange the order of sortable items. When dragging is completed, the handler checks the changed index of child elements. If there's an update, it modifies the items property of the parent block. This items array contains ordered IDs of blocks. When fetching block data, the system sorts the child blocks according to the items data of the parent block.

⁠

Layout DND

Layout DND follows the same logic, and the code structure for it can be found in src/components/block/Block.js.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.