Reziable div lose setting on postback using JQuery

Please refer below code.

HTML

<div>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style type="text/css">
        #draggable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }
        #draggable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }
        #draggable h3
        {
            text-align: center;
            margin: 0;
        }
    </style>
    <script>
        $(function () {
            var offsets = $('[id*=hfOffset]').val();
            var size = $('[id*=hfSize]').val();
            if (offsets != '') {
                $('#draggable').offset({ top: offsets.split(';')[0], left: offsets.split(';')[1] });
            }
            if (size != '') {
                $('#draggable').css('height', size.split(';')[0]);
                $('#draggable').css('width', size.split(';')[1]);
            }
            $("#draggable").draggable({
                drag: function (event, ui) {
                    $('[id*=hfOffset]').val(ui.offset.top + ';' + ui.offset.left);
                }
            });
        });
        $(function () {
            $("#draggable").resizable({
                resize: function (event, ui) {
                    $('[id*=hfSize]').val(ui.size.height + ';' + ui.size.width);

                }
            });
        });
    </script>
    <div id="draggable" class="ui-widget-content">
        <asp:Panel ID="Panel3" runat="server" BackImageUrl="http://www.aspforums.net/images/Metro/blue/ForumsLogoWhite2.png">
        </asp:Panel>
        <asp:HiddenField ID="hfOffset" runat="server" />
        <asp:HiddenField ID="hfSize" runat="server" />
    </div>
    <asp:Button Text="Save" runat="server" />
</div>

Screenshot