Is there a way to have not only position of object remembered, but if it has been rotated?

Is there a way to have not only position of object remembered, but if it has been rotated?

Is there a way to make it remember rotation as well as location? 



  3. <!doctype html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8">
  7. <title></title>
  8. <style>
  9. #draggable, #draggable2 {cursor:move; }

  11. #containment-wrapper {
  12.     width: 1500px;
  13.     height: 2000px;
  14. border: 2px solid #ccc;}
  16. .zoomTarget {
  17.  width: 1000px;
  18.       height: 500px;
  19.       border: 2px solid #ccc;
  20. }

  22.  .object {
  23. float: right;
  24.     -webkit-transition-duration: .3s;
  25.     -moz-transition-duration: .3s;
  26.     -o-transition-duration: .3s;
  27.     transition-duration: .3s;
  28.     -webkit-transition-property: -webkit-transform;
  29.     -moz-transition-property: -moz-transform;
  30.     -o-transition-property: -o-transform;
  31.     transition-property: transform;

  33. }
  35.   .team01 {background-color:orange; }
  36.   .team02 {background-color:red; } 
  37.   .team03 {background-color:blue;} 
  38.  
  39. body {font-family: sans-serif;}
  40. p {background-color:rgba(255,255,255,0.6); color:black;font-size:small;}
  41.  .instructions p {font-size:medium;}
  42. .instructions {width:700px;} 
  43. </style>


  46. </head>

  48. <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  49. <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  50. <script src="https://rawgit.com/godswearhats/jquery-ui-rotatable/master/jquery.ui.rotatable.min.js"></script>



  54. <script>
  55. var positions = JSON.parse(localStorage.positions || "{}");
  56. $(function () {
  57.     var d = $("[id=draggable]").attr("id", function (i) {
  58.         return "draggable_" + i
  59.     })
  60.     $.each(positions, function (id, pos) {
  61.         $("#" + id).css(pos)
  62.     })
  63.     d.draggable({
  64.         containment: "#containment-wrapper",
  65.         scroll: false,
  66.         stop: function (event, ui) {
  67.             positions[this.id] = ui.position
  68.             localStorage.positions = JSON.stringify(positions)
  69.         }
  70.     });
  71. });
  72. </script>


  75. <body>


  78. <div class="instructions">
  79. <p><strong>ZOOM Controls: </strong>Click on a Suite area to Zoom in, click again (other than on a "movable item") to zoom out. 
  80. Mouse out of area and view will pan (auto-scroll).</p>
  81. <p><strong>Movable Item: </strong>Click/Drag on an item to move it. Click on it to rotate 90. </p>
  82. <p><strong>Rememberted Positions: </strong>It will remember the location of the items. 
  83. It stores this info with cookies, and will not be transfered with links to the page to another computer or to another browser. 
  84. It currently does not remember if an item has been rotated or not.</p>
  85. </div>

  87. <div id="containment-wrapper">

  89. <div class="page-body">
  90. <div style="width: 1000px; height: 500px; background-color: lightgray;">Suite 01</div>
  91. <div style="width: 1000px; height: 500px;  background-color: lightblue;">Suite 02</div>
  92. <div style="width: 1000px; height: 500px; background-color: lightgray;">Suite 03</div>
  93. </div>


  96. <div id="draggable" class="object team01" style="width: 200px; height: 300px;"><p>box 01</p></div>
  97. <div id="draggable" class="object team02" style="width: 400px; height: 200px;"><p>box 02</p></div>
  98. <div id="draggable" class="object team03" style="width: 250px; height: 200px;"><p>box 03</p></div>
  99. <div id="draggable" class="object team03" style="width: 350px; height: 150px;"><p>box 04</p></div>


  102. </div>





  108. <script>
  109. $(".object").draggable();
  110. $(".object").click(function() {
  111.     //alert($( this ).css( "transform" ));
  112.     if (  $( this ).css( "transform" ) == 'none' ){
  113.         $(this).css("transform","rotate(90deg)");
  114.     } else {
  115.         $(this).css("transform","" );
  116.     }
  117. });
  118. </script>

  120. <script src="js/zoom.js"></script>
  121. <script>
  122. document.querySelector( '.page-body' ).addEventListener( 'click', function( event ) {
  123. event.preventDefault();
  124. zoom.to({ element: event.target });
  125. } );
  126. </script>


  129. </body>
  130. </html>

I have tried various ways, but I can't seem to get it.

  1. <script>
  2. var positions = JSON.parse(localStorage.positions || "[{"position"}, {"transform"}]");

  4. $(function () {
  5.     var d = $("[id=draggable]").attr("id", function (i) {
  6.         return "draggable_" + i
  7.     })
  8.     $.each(positions, function (id, pos) {
  9.         $("#" + id).css(pos)
  10.     })
  11.     d.draggable({
  12.         containment: "#containment-wrapper",
  13.         scroll: false,
  14.         stop: function (event, ui) {
  15.             positions[this.id] = ui.position, ui.transform
  16.             localStorage.positions = JSON.stringify(positions)
  17.         }
  18.     });
  19. });
  20. </script>
I've been working on this for days, please help if you can. 

Thank you in advance.


I've gotten this far by using information here  https://forum.jquery.com/topic/save-position-of-draggable-item
Save position of draggable item. @ jakecigar helped for that post