Drag and Drop in Angular Block Editor

The drag and drop feature in the Block Editor allows users to intuitively rearrange content blocks by dragging them to different positions within the editor.

Enable drag and drop

You can control the drag-and-drop functionality of the Block Editor using the enableDragAndDrop property on the component. The feature is enabled by default (true).

The Block Editor supports both single and multiple block dragging. Users can drag individual blocks or select multiple blocks and drag them together to a new position:

  • Single block dragging — hover over a block to reveal the drag handle, click and hold the handle, then drag the block to a new position.
  • Multiple block dragging — select the desired blocks first, then click and drag the entire group to a new location.

During the drag operation, a visual indicator shows precisely where the blocks will be placed when dropped, ensuring accurate placement.

To disable drag and drop, set [enableDragAndDrop]="false" on the <ejs-blockeditor> element. The drag handle is then hidden, and users cannot reorder blocks with the mouse.

import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType} from "@syncfusion/ej2-blockeditor";

@Component({
    imports: [BlockEditorModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})


export class AppComponent {
    public blocksData: BlockModel[] = [
        {
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Drag and Drop Demo'
                }
            ]
        },
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Try rearranging blocks by dragging the handle that appears when hovering over them. You can drag a single block or select multiple blocks to drag them together.'
                }
            ]
        },
        {
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Drag and drop is enabled by default'
                }
            ]
        },
        {
            blockType: 'NumberedList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'You can select multiple blocks and drag them together'
                }
            ]
        },
        {
            blockType: 'NumberedList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Try dragging this block to rearrange the content'
                }
            ]
        }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div id="container">
    <ejs-blockeditor [blocks]="blocksData" [enableDragAndDrop]="true" />
</div>

Drag-and-drop events

The editor exposes three events you can use to observe or react to drag-and-drop operations programmatically:

Event Args Description
blockDragStart BlockDragEventArgs Triggers when the user starts dragging a block.
blockDragging BlockDragEventArgs Triggers repeatedly while a block is being dragged.
blockDropped BlockDropEventArgs Triggers when the user drops the block in its new position.

For example, to prevent a drop on a specific block, cancel the blockDropped event:

public onBlockDropped(args: BlockDropEventArgs): void {
    if (args.droppedBlock?.id === 'protected') {
        args.cancel = true; // disallow moving the protected block
    }
}