Loading...
Copy code
Close
Permalink
Close
Please tell us why you want to mark the subject as inappropriate.
(Maximum 200 characters)
Report Inappropriate
Cancel
Private Message
From :
guest
To :
Subject :
Content :
Type the characters you see in the picture below.
Send
Cancel
From :
guest
To :
Subject :
Content :
Type the characters you see in the picture below.
Send
Update
Cancel
Feedback
Email ID
Subject :
Comments :
Send
Cancel
Private Message
Type the characters you see in the picture below.
Type the characters you see in the picture below.
Attach files
Desktop
Google Docs
Each Attachment size should not exceed 1.0 MB.
Max no of attachments : 3
Loading User Profile...
guest
Response title
This is preview!
Attachments
Publish
Back to edit
Cancel
(
)
Sign In
New to this Portal? Click here to
Sign up
You can also use the below options to login
Login with Facebook
Login with Google
Login with Yahoo
jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate
All Forums
Recent Posts
Log In
Search
jQuery
Search
jQuery Forum
Screen name:
Nineve
Nineve's Profile
1
Posts
41
Responses
0
Followers
Activity Trend
Last 30 days
Last 30 days
Date Interval
From Date :
To Date :
Go
Loading Chart...
Posts
Responses
PM
Show:
All
Discussions
Questions
Ideas
Problems
Expanded view
List view
Private Message
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?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
#draggable, #draggable2 {cursor:move; }
#containment-wrapper {
width: 1500px;
height: 2000px;
border: 2px solid #ccc;}
.zoomTarget {
width: 1000px;
height: 500px;
border: 2px solid #ccc;
}
.object {
float: right;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.team01 {background-color:orange; }
.team02 {background-color:red; }
.team03 {background-color:blue;}
body {font-family: sans-serif;}
p {background-color:rgba(255,255,255,0.6); color:black;font-size:small;}
.instructions p {font-size:medium;}
.instructions {width:700px;}
</style>
</head>
<script src="
https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="
https://rawgit.com/godswearhats/jquery-ui-rotatable/master/jquery.ui.rotatable.min.js"></script>
<script>
var positions = JSON.parse(localStorage.positions || "{}");
$(function () {
var d = $("[id=draggable]").attr("id", function (i) {
return "draggable_" + i
})
$.each(positions, function (id, pos) {
$("#" + id).css(pos)
})
d.draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function (event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
});
</script>
<body>
<div class="instructions">
<p><strong>ZOOM Controls: </strong>Click on a Suite area to Zoom in, click again (other than on a "movable item") to zoom out.
Mouse out of area and view will pan (auto-scroll).</p>
<p><strong>Movable Item: </strong>Click/Drag on an item to move it. Click on it to rotate 90. </p>
<p><strong>Rememberted Positions: </strong>It will remember the location of the items.
It stores this info with cookies, and will not be transfered with links to the page to another computer or to another browser.
It currently does not remember if an item has been rotated or not.</p>
</div>
<div id="containment-wrapper">
<div class="page-body">
<div style="width: 1000px; height: 500px; background-color: lightgray;">Suite 01</div>
<div style="width: 1000px; height: 500px; background-color: lightblue;">Suite 02</div>
<div style="width: 1000px; height: 500px; background-color: lightgray;">Suite 03</div>
</div>
<div id="draggable" class="object team01" style="width: 200px; height: 300px;"><p>box 01</p></div>
<div id="draggable" class="object team02" style="width: 400px; height: 200px;"><p>box 02</p></div>
<div id="draggable" class="object team03" style="width: 250px; height: 200px;"><p>box 03</p></div>
<div id="draggable" class="object team03" style="width: 350px; height: 150px;"><p>box 04</p></div>
</div>
<script>
$(".object").draggable();
$(".object").click(function() {
//alert($( this ).css( "transform" ));
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(90deg)");
} else {
$(this).css("transform","" );
}
});
</script>
<script src="js/zoom.js"></script>
<script>
document.querySelector( '.page-body' ).addEventListener( 'click', function( event ) {
event.preventDefault();
zoom.to({ element: event.target });
} );
</script>
</body>
</html>
I have tried various ways, but I can't seem to get it.
<script>
var positions = JSON.parse(localStorage.positions || "[{"position"}, {"transform"}]");
$(function () {
var d = $("[id=draggable]").attr("id", function (i) {
return "draggable_" + i
})
$.each(positions, function (id, pos) {
$("#" + id).css(pos)
})
d.draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function (event, ui) {
positions[this.id] = ui.position, ui.transform
localStorage.positions = JSON.stringify(positions)
}
});
});
</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 »
Moderate user : Nineve
Forum