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

11 Jun 20242 minutes 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.

<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://services.syncfusion.com/vue/production/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://services.syncfusion.com/vue/production/api/documenteditor/',
      settings: { allowDragAndDrop: false }
    }
  }
}
</script>

Note: Default value of allowDragAndDrop property is true.

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

<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://services.syncfusion.com/vue/production/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://services.syncfusion.com/vue/production/api/documenteditor/',
        settings : { allowDragAndDrop: false }
      }
  }
}
</script>

Note: Default value of allowDragAndDrop property is true.