How to Disable Drag and Drop in Angular Document Editor

26 Jun 20241 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 };
}

Note: Default value of allowDragAndDrop property is true.