<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<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);
}
});
});
</script>
<style type = "text/css">
.drag_drop_grid th,.drag_drop_grid td{width:50px;}
.drag_drop_grid td{cursor:pointer}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" CssClass = "drag_drop_grid" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField = "Item" HeaderText = "Item" ItemStyle-CssClass = "ui-state-default" />
<asp:BoundField DataField = "Price" HeaderText = "Price" ItemStyle-CssClass = "ui-state-default"/>
</Columns>
</asp:GridView>
<hr />
<asp:GridView ID="GridView2" runat="server" CssClass = "drag_drop_grid" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField = "Item" HeaderText = "Item" ItemStyle-CssClass = "ui-state-highlight" />
<asp:BoundField DataField = "Price" HeaderText = "Price" ItemStyle-CssClass = "ui-state-highlight"/>
</Columns>
</asp:GridView>
</form>
</body>
</html>
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", 200);
dt.Rows.Add("Football", 30);
GridView1.DataSource = dt;
GridView1.DataBind();
dt.Rows.Clear();
dt.Rows.Add("Bat", 22.5);
GridView2.DataSource = dt;
GridView2.DataBind();
}
}
Demo
| Item | Price |
|---|
| Shirt |
200 |
| Football |
30 |
