How to Disable Drag and Drop in React DOCX Editor

27 Aug 20261 minute to read

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

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

const settings = { allowDragAndDrop: false };
const hostUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

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

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX 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

The default value of allowDragAndDrop property is true.

The following example illustrates how to disable the drag and drop option in the DOCX Editor.

const settings = { allowDragAndDrop: false };
const hostUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

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

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX 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

The default value of allowDragAndDrop property is true.