We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I drag and drop an element from a list inside document editor


I'm using Angular 7 and SyncFusion framework. 

I began to add this component : 

<ejs-documenteditor #document_editor id="container" style="width:100%;height:100%;display:block" [isReadOnly]=false
[enableEditor]=true [enableWordExport]=true

I added a list :

<ejs-listbox id="listbox" [dataSource]='data'>

and I want to drag and drop in content of word editor and element of list.

3 Replies

KB Kurthis Banu Abdul Majeeth Syncfusion Team August 19, 2021 09:12 AM

Hi Mariem,

Thank you for contacting Syncfusion support.

We have prepared the sample based on your requirement. For your reference, we have attached angular stack-blitz sample in the below link.

Sample link:

In this sample, we had used list view component for Drag the items and used drop event for insert the dragged text into the documenteditor. Please find the code change in line number 31 in app.component.ts file.

Kurthis Banu A.

BM BADIS Mariem August 23, 2021 02:21 AM


Thank you for your reply; It's word on stackblitz. 

When i repeat all process in my project; I have a missed method :

and their 

this is my all project : 

<div class="row">
<div class="col-6">
<ejs-listview id='listview' [dataSource]='listData' (select)="onSelect($event)" allowDragAndDrop='true' [fields]="fields"></ejs-listview>
<div class="col-6">
<div class="control-section">
<div id="default_title_bar" class="e-de-ctn-title"></div>
<ejs-documenteditorcontainer #RTE id="defaultRTE" #documenteditor_default height="560px" [enableToolbar]=true
[locale]="culture" (created)="onCreate()" (documentChange)="onDocumentChange()"
[serviceUrl]='serviceLink' style="display:block;">

could you help me?

KB Kurthis Banu Abdul Majeeth Syncfusion Team August 23, 2021 03:24 AM

Hi Badis Mariem, 

Kindly modified your code like below code snippet  

 <ejs-listview id='listview' [dataSource]='listData' allowDragAndDrop='true'></ejs-listview> 

Please find the sample in below link: 

Documentation Link: 

Kurthis Banu A. 

Live Chat Icon For mobile
Up arrow icon