How to drag and drop the ListView item to the Angular Rich Text Editor as text content

1. Initialize the ListView and RichTextEditor components.

<div class="control-section">

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

        <br /> <br /> <br />

      <ejs-richtexteditor #RTE id='defaultRTE' (created)='onCreate()'>

      </ejs-richtexteditor>

    </div>

public data: { [key: string]: Object }[] = [

  {

    "text": "Hennessey Venom",

    "id": "list-01",

    "htmlAttributes": { draggable: true }

  },

  {

    "text": "Bugatti Chiron",

    "id": "list-02",

    "htmlAttributes": { draggable: true }

  },

  {

    "text": "Bugatti Veyron Super Sport",

    "id": "list-03",

    "htmlAttributes": { draggable: true }

  }

];

this.editArea = document.querySelector("#defaultRTE .e-content") as HTMLElement;

// Drop handler
this.editArea.addEventListener("drop", this.dropHandler.bind(this));

4. Bind the dragStart event to the ListView element to get the dragged item’s text content.

this.listviewEle = document.getElementById('listview') as HTMLElement;

 

// DragStart event binding

this.listviewEle.addEventListener("dragstart", function (e) {

  e.dataTransfer.setData("Text", (e.target as HTMLElement).innerText);

});

5. Now, include the following code in the dropHandler function to insert the text into the Rich Text Editor.

dropHandler(e: any): void {

  //Prevent browser default dragop and drop action

  e.preventDefault();

 

  // Do drop action if the target is inside RTE edit area

  if (this.rteObj.inputElement.contains(e.target)) {

    let range: Range;

 

    if (this.rteObj.contentModule.getDocument().caretRangeFromPoint) {

      range = this.rteObj.contentModule.getDocument().caretRangeFromPoint(e.clientX, e.clientY);

    } else if (e.rangeParent) {

      range = this.rteObj.contentModule.getDocument().createRange();

      range.setStart(e.rangeParent, e.rangeOffset);

    }

 

    this.rteObj.selectRange(range);


    if (this.rteObj.formatter.getUndoRedoStack().length === 0) {

      this.rteObj.formatter.saveData();

    }

    var text = e.dataTransfer.getData('Text').replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, '');


    this.rteObj.executeCommand("insertHTML", text);

    this.rteObj.formatter.saveData();

    this.rteObj.formatter.enableUndo(this.rteObj);

  }

}