Search jQuery

jQuery Forum

Screen name:
Nineve

Nineve's Profile

1 Posts

41 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Is there a way to have not only position of object remembered, but if it has been rotated?
[80Replies]
- 19-Sep-2017 03:04 PM
- Forum: Using jQuery
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;}
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

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend