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 an external source using the ‘insertText’ method in the 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 the Document Editor, the dragged text will be inserted into the Document Editor.
