Tutorial : How Developers Create Jquery Drag Drop Ui In Asp.Net Mvc
Here I will give an example of drag and drop Value and ID using jQuery Drag-Drop UI in ASP.net MVC.
The example will contain multiple Employee list. We can drag and drop boxes between the two Tables. Also we have taken Name and ID value property of the control.
Create a simple Empty MVC Application to give you example of how we can jquery Drag Drop UI in asp.net MVC.


CREATE TABLE [dbo].[EmployeeList] (
[EmployeeId] INT IDENTITY (1, 1) NOT NULL,
[EmployeeName] VARCHAR (50) NOT NULL,
PRIMARY KEY CLUSTERED ([EmployeeId] ASC)
);
In the wizard that comes up, select the Employee.mdf database and the EmployeeList table designed in the below step. After completing the wizard, the following table mapping gets displayed something like this.

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using DragDrop_MVC_jQuery.Models;
namespace DragDrop_MVC_jQuery.Controllers
{
public class EmployeeAPIController : ApiController
{
ApplicationEntities ctx;
public EmployeeAPIController()
{
ctx = new ApplicationEntities();
}
[Route("EmployeeList")]
public IEnumerable<Employee> GetEmployee()
{
return ctx.Employee.ToList();
}
}
}
Now, In the controllers folder, add a new Empty MVC controller of the name EmployeeController. This controller class will generate an Index method. Scaffold a new Empty view from the Index method, shows something like this.

Now, Add the following markup in the Index view, shows something like this.
<div style="width:100%">
<div id="left" style="float:left;width:30%;">
<table>
<tr>
<td>
<h1>Employee List</h1>
</td>
</tr>
<tr>
<td>
<div id="divleft">
<ul id="EmployeeList"></ul>
</div>
</td>
</tr>
</table>
</div>
<div id="left" style="float:left;width:70%;">
<table>
<tr>
<td>
<h1>Selected Employee</h1>
</td>
</tr>
<tr>
<td>
<div id="divright">
<ul id="selectedEmployeeList"></ul>
</div>
</td>
</tr>
</table>
</div>
</div>
Now, Add the following styles in the View, shows something like this.
style type="text/css">
table, td {
background-color: mediumaquamarine;
border: ridge;
}
#divleft,#divright {
background-color: mediumaquamarine;
height: 150px;
width: 150px;
font-family: Arial;
}
</style>
Now, In the Index.cshtml page add the following JS, shows something like this.
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
Now, In the Index.cshtml page add the following Script, shows something like this.
<script type="text/javascript">
$(document).ready(function () {
// debugger;
loadEmployee();
//Function to set events for Drag-Drop
function setEvents() {
var EmployeeList = $('li');
//Set Drag on Each 'li' in the Employeelist
$.each(EmployeeList, function (idx, val) {
$('li').on('dragstart', function (evt) {
evt.originalEvent.dataTransfer.setData("Value", evt.target.textContent);
evt.originalEvent.dataTransfer.setData("Text", evt.target.id);
//evt.originalEvent.dataTransfer.setData("Text", this.id);
evt.target.draggable = false;
});
});
//Set the Drop on the <div>
$("#divright").on('drop', function (evt) {
evt.preventDefault();
debugger;
var data = evt.originalEvent.dataTransfer.getData("Value");
var value = evt.originalEvent.dataTransfer.getData("Text");
var lst = $("#selectedEmployeeList");
var li = "<li id=" + value + ">" + value +" "+ data + "</li>";
li.textContent = data;
lst.append(li);
});
//The dragover
$("#divright").on('dragover', function (evt) {
evt.preventDefault();
});
}
///Function to load Employee using call to WEB API
function loadEmployee() {
var items = "";
var Id = "";
$.ajax({
url: "/Employee",
type: "GET"
}).done(function (resp) {
$.each(resp, function (idx, val) {
items += "<li id=" + val.EmployeeId + " draggable='true'>" + val.EmployeeName + "</li>";
});
$("#EmployeeList").html(items);
//$("#hdnID").html(Id);
setEvents();
}).error(function (err) {
alert("Error! " + err.status);
});
}
});
</script>
The script has the following specifications:
- The function ‘loadEmployee()’ makes an ajax call to WEB API. When the call is successful, the iteration is done through the response. This iteration adds the <li> tag in the ‘EmployeeList’ list with the draggable attribute set to true.
- The function ‘setEvents()’ performs the following two step operations:
2) The <div> of id ‘divright’ is subscribed to ‘drop’ event, it accepts the dragged Text. Once the text is accepted, it is set to the <li> which is dynamically appended in the list with id as ‘selectedEmployeeList’.
Now, run the application, the Employees data gets loaded, shows something like this.

Drag the Employee from the ‘Employee List’ and drop it in the ‘Selected Employee’, shows something like this.

The Below Red Mark shows Multiple Employee the Drag Action. Once the drop operation is over the result will be Display something like this.
