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
close icon

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

Hello,

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
[documentEditorSettings]='tools1'
></ejs-documenteditor>


I added a list :

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


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 02:12 PM UTC

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.



Regards,
Kurthis Banu A.




BM BADIS Mariem August 23, 2021 07:21 AM UTC

Hello,

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

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

onSelect($event)
and their 
[fields]="fields"


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>
<div class="col-6">
<div class="control-section">
<div>
<div id="default_title_bar" class="e-de-ctn-title"></div>
<div>
<ejs-documenteditorcontainer #RTE id="defaultRTE" #documenteditor_default height="560px" [enableToolbar]=true
[locale]="culture" (created)="onCreate()" (documentChange)="onDocumentChange()"
[serviceUrl]='serviceLink' style="display:block;">
</ejs-documenteditorcontainer>
</div>
</div>
</div>
</div>
</div>


could you help me?





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

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: 

Regards, 
Kurthis Banu A. 


Loader.
Live Chat Icon For mobile
Up arrow icon