In this article I will explain with an example, how to Drag Rows from Source GridView and then drop it in another Destination GridView in ASP.Net using jQuery.
 
 

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 GridView Rows with jQuery in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code