How to Disable Drag and Drop in Angular Document Editor

3 May 20251 minute to read

Document Editor provides support to drag and drop contents within the component and it can be customized(enable and disable) using allowDragAndDrop property in Document editor settings.

The following example illustrates to customize the drag and drop option.

@Component({
      template: `<ejs-documenteditorcontainer serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" [enableToolbar]=true [documentEditorSettings]="settings"> </ejs-documenteditorcontainer>`,
})
export class AppComponent{
    public settings: DocumentEditorSettingsModel = { allowDragAndDrop : false };
}

Note: Default value of allowDragAndDrop property is true.

The following example illustrates to disable the drag and drop option in DocumentEditor.

@Component({
      template: `<ejs-documenteditor #document_editor height="330px" [enablePrint]=true [documentEditorSettings]="settings"></ejs-documenteditor>`,
})
export class AppComponent{
    public settings: DocumentEditorSettingsModel = { allowDragAndDrop : false };
}

The Web API hosted link https://services.syncfusion.com/angular/production/api/documenteditor/ utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

Note: Default value of allowDragAndDrop property is true.