How to disable drag and drop in document editor in React Document editor component

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.

var settings = { allowDragAndDrop: false };
var hostUrl = 'https://services.syncfusion.com/react/production/api/documenteditor/';

<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl={hostUrl} documentEditorSettings={settings}/>

The Web API hosted link https://services.syncfusion.com/react/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.

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

var settings = { allowDragAndDrop: false };
var hostUrl = 'https://services.syncfusion.com/react/production/api/documenteditor/';

<DocumentEditorComponent id="container" height={'590px'} documentEditorSettings={settings}/>

The Web API hosted link https://services.syncfusion.com/react/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.