Hi all,
we can do this, because style sheets will be not reloaded after psotback.what we have to do is we have to add new rule or if the rule is already defined in the style sheets we have to modify the style sheet.
Steps to retain the position after postback:
1.Bind stop event to the draggable.
2.Check any rule is defined with the elementID in the stylesheets.
3.If rule is already definded then rule need to be modified,else new rule need to be added in stylesheet with offset values got from the stop event of the draggable.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(init); function init() {
BindEvents();
Sys.Application.add_load(BindEvents);
}
function BindEvents() {
$('#divDraaggable').draggable({
stop: function (event, ui) {
var styleSheetList = document.styleSheets;
for (var i = 0; i < styleSheetList.length; i++) {
var ss = document.styleSheets[i];
var rules = (ss.cssRules || ss.rules);
var lsel = '#' + ui.helper[0].id;
for (var i2 = 0, len = rules.length; i2 < len; i2++) {
if (rules[i2].selectorText == lsel) {
rules[i2].style.top = ui.position.top + 'px';
rules[i2].style.left = ui.position.left + 'px';
break;
}
}
}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divDraaggable">
Drag me...i'll retain my position after postback.
</div>
<asp:Button ID="btnpostback" runat="server" Text="postback" OnClick="btnpostback_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Copy paste this rule in Style.css
#divDraaggable {
height:200px;
width:200px;
border:1px solid black;
}