Problem

We have two Grid Views namely Patients and Messages side by side that contains records. When the record gets selected, we need to make the grid records drag able. We need to give provision to drag and place (not Drag & Drop) the record in another grid view record and vice versa.

As a result we need to assign Patients to the respective Messages using Drag. One Patient may have different Messages. Same Message can be assigned to any Patients as many times as possible. Relationship between Messages and Patients is One to Many.

Step by Step Solution for the problem

1. Refer the JQuery Files

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<style>
    div.drag-row
    {
        width: 350px;
        height: 45px;
        background:#ffefc4;
        color:Black;
    }
    .dragrow
    {
        width:100%;
        height:100%;
        background-color:#ffefc4;
    }
.sel-row
{	background:#ffefc4;
    border: 3px solid #ffba00;
    color:Black;
   
}
.sel-row td
{
	cursor:pointer;
	
	font-weight:bold;
	
}
</style>

<asp:GridView ID="grdPatientDetails" Width="99%" AutoGenerateColumns="false" GridLines="None"
                                runat="server" BorderColor="White"  OnRowDataBound="grdPatientDetails_RowDataBound" CssClass="grdPatientDetails"
                                OnSelectedIndexChanged="grdPatientDetails_SelectedIndexChanged" RowStyle-Font-Size="10px" RowStyle-ForeColor="#404040">
                                <SelectedRowStyle CssClass="sel-row" />
     </asp:GridView>

Remember that the CSS class for the Grid is very important as we identify this Grid in jQuery using CSS only. 
<asp:GridView ID="grdMessageDetails" Width="100%" AutoGenerateColumns="false" GridLines="None"
                                runat="server" OnRowCommand="grdMessageDetails_RowCommand" OnRowDataBound="grdMessageDetails_RowDataBound"
                                RowStyle-Font-Size="10px" RowStyle-ForeColor="#404040" CssClass="grdMessageDetails"                                OnSelectedIndexChanged="grdMessageDetails_SelectedIndexChanged">
<SelectedRowStyle CssClass="sel-row" />                             
</asp:GridView>

 
string dragdrop = @"$(document).ready(function(){
                                                            setupDragDrop($('.grdMessageDetails tr'), $('.grdPatientDetails tr'), 'pat');
                                                            setupDragDrop($('.grdPatientDetails tr'), $('.grdMessageDetails tr'), 'msg');
                                                 }
                                              );

                function setupDragDrop(source, target, identity) 
                {
                    var droppable = 'false';
                    source.draggable(
                       {
                            helper: function(event) 
                            {
                                $('#" + hdnMsgValue.ClientID + @"').val(identity);                        
                                if($(this).hasClass('sel-row'))
                                {
                                    droppable = 'true';
                                    return $('<div class=""drag-row""><table class=""dragrow""></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
                                }
                                else
                                {
                                    droppable = 'false';
                                    return $('<div></div>');
                                }
                            },
                            appendTo: 'body'
                        });
                    target.droppable(
                        {
                            drop: function(event, ui) {
                            if(droppable == 'true')
                            {
                                var index = $(this)[0].rowIndex;
                                $('#" + hdnIndexValue.ClientID + @"').val(index);
                                 alert(‘dropped’ + hdnIndexValue.ClientID);
                            }
                        },
                        accept: source.selector
                        });
                }";

ScriptManager.RegisterStartupScript(this, GetType(), "DragDrop", dragdrop, true);

Note : accept: source.selector prevents grid(html table) from accepting its own rows.

And thats it now we can easily drag the grid records and place in another Grid and play with it