Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery Drag
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.
<!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 24-May-12 0:41am
jack_th1.3K
Comments
ryanb31 at 25-May-12 11:18am
   
Sorry, what exactly is the problem?
jack_th at 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.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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;
}
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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.
  Permalink  
v2

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

  Print Answers RSS
0 DamithSL 300
1 Zoltán Zörgő 170
2 OriginalGriff 150
3 Sergey Alexandrovich Kryukov 120
4 Maciej Los 115
0 OriginalGriff 7,740
1 DamithSL 5,769
2 Sergey Alexandrovich Kryukov 5,424
3 Maciej Los 5,076
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 3 Jul 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100