Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I 'm trying to create 2 draggable boxs but it is not work because it can not restore the position from the last dragging.
Here are my stupid codes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test Draggable</title>
	<link rel="stylesheet" href="sources/jquery.ui.all.css">
	<script src="sources/jquery-1.7.2.js"></script>
	<script src="sources/jquery.ui.core.js"></script>
	<script src="sources/jquery.ui.widget.js"></script>
	<script src="sources/jquery.ui.mouse.js"></script>
	<script src="sources/jquery.ui.draggable.js"></script>
	<script src="sources/jquery.cookie.js"></script>
	<link rel="stylesheet" href="sources/demos.css">
	<style>
	    #draggable1 {top:70px; left:77px; width: 100px; height: 100px; padding: 0.5em; background-color:#E3E4FA;}
	    #draggable2 {top:170px; left:77px; width: 100px; height: 100px; padding: 0.5em; background-color:#E9CFEC;}
	</style>
	<script>

  $(document).ready(function () {
	    $(function() {
	        var d1 = $.cookie('positionD1');
	        var d2 = $.cookie('positionD2');
	        
	        if (d1 && d2) {
	            //alert(d1[0]);
	            var savedPosition1 = $.cookie('positionD1').split(',');
	            $("#draggable1").css({ top: savedPosition1[0], left: savedPosition1[1] });
	            var savedPosition2 = $.cookie('positionD2').split(',');
	            $("#draggable2").css({ top: savedPosition2[0], left: savedPosition2[1] });
	        }

	        $("#draggable1").draggable({
	            stop: function(event, ui) {

	                var currentPos1 = $("#draggable1").position();
	                $.cookie('positionD1', currentPos1.top + ',' + currentPos1.left);
	                //alert($.cookie('positionD1'));
	               // $("#d1").innertext = $.cookie('positionD1');
	            }
	        });
	        $("#draggable2").draggable({
	            stop: function(event, ui) {

	                var currentPos2 = $("#draggable2").position();
	                $.cookie('positionD2', currentPos2.top + ',' + currentPos2.left);
	                //alert($.cookie('positionD2'));
	               // $("#d2").innertext = $.cookie('positionD2');
	            }
	        });

	        $("draggable1").each(function() {
	            var savedPosition1 = $.cookie('positionD1').split(',');
	            $(this).css({ top: savedPosition1(0), left: savedPosition1(1) });
	        });
	        $("draggable2").each(function() {
	            var savedPosition2 = $.cookie('positionD2').split(',');
	            $(this).css({ top: savedPosition2(0), left: savedPosition2(1) });
	        });

	    });
	  });
	    /*$(function() {
	             $("draggable1").each(function() {
	                var savedPosition1 = $.cookie('positionD1').split(',');
	                $(this).css({ top: savedPosition1(0), left: savedPosition1(1) });
	            });
	            $("draggable2").each(function() {
	                var savedPosition2 = $.cookie('positionD2').split(',');
	                $(this).css({ top: savedPosition2(0), left: savedPosition2(1) });
	            });
    	  
	    });*/


	</script>
</head>
<body>

<div class="demo">

    <div id="draggable1" class="ui-widget-content">
	    <p>100x100</p>
	    <p id="d1"></p>
    </div>
    <div id="draggable2" class="ui-widget-content">
	    <p>100x100</p>
	    <p id="d2"></p>
    </div>
    
</div>

</body>
</html>


Thank you for help.
Posted
Comments
ZurdoDev 25-May-12 11:18am    
Sorry, what exactly is the problem?
jack_th 3-Jul-12 20:50pm    
Thanks for all comments and solutions but I just forget this topic all along. I'm really sorry for my fault that make some of you feel on disappoint. But now get the solution. No codes are wrong but I just stupid on web programming
, I run it direct through file path like 'file:///D:/test.html', so the page can't create cookie anymore. When I try to install IIS to my computer, I ran it again and it works.

Thank you for discussions.

XML
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;
}
 
Share this answer
 
Thanks for all comments and solutions but I just forget this topic all along. I'm really sorry for my fault that make some of you feel on disappoint. But now get the solution. No codes are wrong but I just stupid on web programming
, I run it direct through file path like 'file:///D:/test.html', so the page can't create cookie anymore. When I try to install IIS to my computer, I ran it again on localhost and it works.

Thank you for discussions.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900