Category / Section
How to add drag-and-drop text option in Document Editor for ASP.NET MVC?
2 mins read
You can insert text in the Document Editor control by dragging the content from external source using the ‘insertText’ method in Document Editor.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container body-content">
<div>
<div style="display:flex">
<div style="width:15%">
<b><label>Drag content</label></b>
@Html.EJS().ListView("listview").Enable(true).DataSource((IEnumerable<object>)ViewBag.dataSource).Render()
</div>
<div style="width:85%">
@Html.EJS().DocumentEditorContainer("container").ServiceUrl("/api/DocumentEditor/Import").EnableToolbar(true).Created("onCreated").Render()
</div>
</div>
</div>
</div>
@RenderSection("scripts", required: false)
@Html.EJS().ScriptManager()
</body>
</html>
JS
<script>
var documenteditor;
function onCreated() {
var container = document.getElementById("container").ej2_instances[0];
documenteditor = container.documentEditor;
documenteditor.resize();
}
//Add drag start element for list view
document.getElementById("listview").addEventListener("dragstart", function (event) {
event.dataTransfer.setData("Text", event.target.innerText);
event.target.classList.add('de-drag-target');
});
//Prevent default drag over for document editor element
document.getElementById("container").addEventListener("dragover", function (event) {
event.preventDefault();
});
//Drop Event for document editor element
document.getElementById("container").addEventListener("drop", function (e) {
console.log(this);
var text = e.dataTransfer.getData('Text').replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, '');
documenteditor.selection.select({ x: e.offsetX, y: e.offsetY, extend: false });
documenteditor.editor.insertText(text);
});
document.addEventListener("dragend", function (event) {
if (event.target.classList.contains('de-drag-target')) {
event.target.classList.remove('de-drag-target');
}
});
</script>
Controller
public ActionResult Index()
{
List<object> listdata = new List<object>();
listdata.Add(new
{
text = "FirstName",
id = "_firstName",
htmlAttributes = new { draggable = true }
});
listdata.Add(new
{
text = "LastName",
id = "_lastName",
htmlAttributes = new { draggable = true }
});
listdata.Add(new
{
text = "EmailID",
id = "_email_id",
htmlAttributes = new { draggable = true }
});
listdata.Add(new
{
text = "MobileNumber",
id = "_MobileNumber",
htmlAttributes = new { draggable = true }
});
ViewBag.dataSource = listdata;
return View();
}
In the previous sample, if you drag the content from the List View component in the left pane and drop it in Document Editor, the dragged text will be inserted in to the Document Editor.
