How to Disable Drag and Drop in Vue DOCX Editor

28 Aug 20263 minutes to read

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

<template>
  <ejs-documenteditorcontainer ref="doceditcontainer" :serviceUrl="hostUrl" :enableToolbar='true' height='600px'
    :documentEditorSettings="settings"></ejs-documenteditorcontainer>
</template>

<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer } from '@syncfusion/ej2-vue-documenteditor';

const hostUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
const settings = { allowDragAndDrop: false };
</script>
<template>
  <ejs-documenteditorcontainer ref="doceditcontainer" :serviceUrl="hostUrl" :enableToolbar='true' height='600px'
    :documentEditorSettings="settings"></ejs-documenteditorcontainer>
</template>

<script>
import { DocumentEditorContainerComponent } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
  },
  data: function () {
    return {
      hostUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
      settings: { allowDragAndDrop: false }
    }
  }
}
</script>

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.

The default value of allowDragAndDrop property is true.

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

<template>
  <ejs-documenteditor ref="docedit" height='600px' :documentEditorSettings="settings"></ejs-documenteditor>
</template>

<script setup>
import { DocumentEditorComponent as EjsDocumenteditor } from "@syncfusion/ej2-vue-documenteditor";

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

</script>
<template>
  <ejs-documenteditor ref="docedit" height='600px' :documentEditorSettings="settings"></ejs-documenteditor>  
</template>

<script>
import { DocumentEditorComponent } from "@syncfusion/ej2-vue-documenteditor";

export default {
  components: {
    'ejs-documenteditor': DocumentEditorComponent
  },
  data: function() {
      return {
        hostUrl : 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
        settings : { allowDragAndDrop: false }
      }
  }
}
</script>

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.

The default value of allowDragAndDrop property is true.