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

[BADIS Mariem]

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>
 Copy

I added a list :

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

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

[Kurthis Banu Abdul Majeeth]

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:

https://stackblitz.com/edit/angular-qzxxzn-vy1bzb?file=app.component.ts

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.

[BADIS Mariem]

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 
 Copy

[fields]="fields"


this is my all project : 

 Copy

<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?
 Copy

[Kurthis Banu Abdul Majeeth]

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: 

https://stackblitz.com/edit/angular-qzxxzn-bwu9mr?file=app.component.html 

Documentation Link: 

https://ej2.syncfusion.com/angular/documentation/listview/getting-started/ 

Regards, 

Kurthis Banu A.