In this article I will explain with an example, how to Drag and Drop Rows from Source GridView to Destination GridView in ASP.Net using C# and VB.Net.
 
 

HTML Markup

The HTML Markup consists of:
Source GridView – For displaying data.
The source GridView has been assigned with CSS classes:
1. drag_drop_grid
2. GridSrc
 
Destination GridView – For drag and drop of data.
The destination GridView has been assigned with CSS classes:
1. drag_drop_grid
2. GridDest
 
Note: The drag_drop_grid CSS class will be used for the implementation of the jQuery UI Sortable plugin.
 
<asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" />
    </Columns>
</asp:GridView>
<hr />
<asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" />
    </Columns>
</asp:GridView>
 
 

Binding the Source and the Destination GridViews

Inside the Page_Load event handler, the source GridView is populated with a DataTable and the destination GridView is populated with a dummy row.
Note: For beginners in how to populate table with Dummy data please refer my article Dynamically create DataTable and bind to GridView in ASP.Net
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] {
                            new DataColumn("Item"),
                            new DataColumn("Price") });
        dt.Rows.Add("Shirt", 450);
        dt.Rows.Add("Jeans", 3200);
        dt.Rows.Add("Trousers", 1900);
        dt.Rows.Add("Tie", 185);
        dt.Rows.Add("Cap", 100);
        dt.Rows.Add("Hat", 120);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        gvSource.UseAccessibleHeader = true;
        gvSource.DataSource = dt;
        gvSource.DataBind();
 
        dt.Rows.Clear();
        dt.Rows.Add();
        gvDest.DataSource = dt;
        gvDest.DataBind();
    }
}
 
 

Implementing Drag and Drop Functionality using jQuery

Inside the document.ready event handler, the jQuery UI Sortable plugin is applied to the source GridView using the drag_drop_grid CSS class and the dummy row is removed from the destination GridView.
The jQuery UI Sortable plugin properties are as follows:
1.items - the first row i.e. the Header row is excluded from the Drag Drop functionality.
2. cursor – used to specify the cursor.
3. connectWith – used to specify the destination GridView.
4. axis – used to specify whether vertical or horizontal. Here it is set to y as it is row Drag and Drop.
5. dropOnEmpty – when set to true, it will allow drag and drop to empty GridView.
 
The jQuery UI Sortable plugin events are as follows:
1. receive – this event is raised when the row is dropped onto the destination GridView. Here the received row is appended to the destination GridView.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $(".drag_drop_grid").sortable({
             items: 'tr:not(tr:first-child)',
             cursor: 'crosshair',
             connectWith: '.drag_drop_grid',
             axis: 'y',
             dropOnEmpty: true,
             receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        });
        $("[id*=gvDest]tr:not(tr:first-child)").remove();
    });
</script>
 
 

Below are the CSS styles for the source and the destination GridViews

The following CSS classes are used to style the GridViews.
<style type="text/css">
    .GridSrc td 
    {
        background-color: #A1DCF2;
        color: black;
        font-size: 10pt;
        font-family: Arial;
        line-height: 200%;
        cursor: pointer;
        width: 100px
    }
    .GridSrc th
     {
        background-color: #3AC0F2;
        color: White;
        font-family: Arial;
        font-size: 10pt;
        line-height: 200%;
        width: 100px;
 
    }
    .GridDest td
    {
        background-color: #eee !important;
        color: black;
        font-family: Arial;
        font-size: 10pt;
        line-height: 200%;
        cursor: pointer;
        width: 100px
 
    }
    .GridDest th
    {
        background-color: #6C6C6C !important;
        color: White;
        font-family: Arial;
        font-size: 10pt;
        line-height: 200%;
        width: 100px 
    }
</style>
 
 

Screenshot

Drag and Drop Rows from Source GridView to Destination GridView in ASP.Net using jQuery
 
 

Demo

View Demo
 
 

Downloads

Download Code