Search jQuery

jQuery Forum

Using jQuery

Nineve

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

in Using jQuery • 5 years ago

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

Replies(80)

jakecigar

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

5 years ago

It would help if you made a fiddle.

You can add the rotate CSS to the position Object.

When you make a change to positions, just make sure you update the localStorage.

JΛ̊KE

Nineve

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

5 years ago

I've set it up here:
https://jsfiddle.net/Nineve/ed54nL7h/

jakecigar

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

5 years ago

Your fiddle doesn’t run.
See Tutorial — jsFiddle 0.5a2 documentation

You didn’t include zoom.

JΛ̊KE

Nineve

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

5 years ago

I'm sorry. That part is not even relevant, I think I got it striped out of there.

https://jsfiddle.net/Nineve/793cutsv/1/

jakecigar

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

5 years ago

See https://jsfiddle.net/jakecigar/kL9k5rwk/ The spinning animation can be removed if you change the CSS & jQuery a bit.

JΛ̊KE

Nineve

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

5 years ago

OMG thank you for getting me that far! I spent days trying to get that.

Did you mean if I changed the rotation code like this?

$(".object").draggable();
$(".object").on("click", function(){
$(this).toggleClass("rot");
})

here is the fiddle

https://jsfiddle.net/Nineve/vbdqa5Lh/1/

Also, is there a way to circumvent specifying how many boxes there are? I don't know how many there will be in the final version. Perhaps 200 or so.

Again thanks for you help!

jakecigar

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

5 years ago

No. To get rid of the initial rotation. You need to move all the attributes of the CSS class object into some other selector, then add it to the elements after their css is set.

JΛ̊KE

jakecigar

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

5 years ago

https://jsfiddle.net/jakecigar/kL9k5rwk/4/ uses a class timed that is added after the CSS is applied.

JΛ̊KE

Nineve

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

5 years ago

That's working great, thank you.

When I add another object though, it only remembers the first four. I thought it was this line

console.log(JSON.stringify(positions, 4, 4))

But it does not effect it. What exactly are those 4's doing anyway?

I will have to be adding a lot of objects. What am I missing?

https://jsfiddle.net/7mtqrhhs/1/

jakecigar

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

5 years ago

Console.log is just for debugging.

https://jsfiddle.net/jakecigar/Lh10jrxc/ saves newly added boxes

JΛ̊KE

Nineve

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

5 years ago

Man, you have been such a lifesaver! Thought I was going to lose it.

Thank you, thank you, thank you!

Nineve

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

5 years ago

Hi Jake,

Just discovered something with your otherwise perfect solution https://jsfiddle.net/jakecigar/Lh10jrxc/. If you zoom in or out using the browser view options, and then try to move a box, they glitch out.

Is there a way to prevent this from happening? Should I start this on a new thread?

Thank you in advance (Jake or anyone) for any assistance.

jakecigar

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

5 years ago

Nothing glitches out for me in Safari. What browser are you using? Is it reproducible in jsfiddle?

JΛ̊KE

Nineve

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

5 years ago

Hi Jake,

Yeah, it happens in Safari, and Firefox.

When you zoom in and then try to click and drag the boxes they skip and dart (while mouse button is still down), sometimes out of the containing div all together. Very strange.

The more you zoom in the more extreme the behavior.

Nineve

jakecigar

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

5 years ago

I zoomed the fiddle page with command+ (Safari). I then scrolled the window to find a box, I moved it. No problem.

I run Safari Version 11.0.1 (13604.3.1)

JΛ̊KE

Nineve

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

5 years ago

I am running 10.1.1, so perhaps that is problem. I will update and let you know as soon as I find out.

jakecigar

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

5 years ago

It could also be a problem with jsfiddle. Did you make a page using that code yet? Does it fail?

JΛ̊KE

jakecigar

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

5 years ago

I also don’t see any problem in Firefox.

JΛ̊KE

Nineve

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

5 years ago

Ok, updated Safari again, this time I'm at 11.0. Seems to be working as intended. What a pain, I'm sorry to have not been able to problem solve this without you.

Firefox, seems to be working fine now as well.

jakecigar

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

5 years ago

Your page worked fine as well. Safari + firefox not working the same way is very rare. Usually it’s Safari and Chrome that are broken together.

There is often no easy way to debug this kind of problem. Asking for help is no sin.

JΛ̊KE

Nineve

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

5 years ago

Thank you Jake! I really do not want to be a pest.

I have a fiddle where I've added zoom to divs to this project. When zoomed in (by clicking on one of the pastel boxes - zoom back out by clicking on a pastel box again) and then trying to move a regular box, the box darts around (sometimes off area) and sometimes hits an invisible wall. Is this happening on your system?

It happens in Chrome, Safari and Firefox on mine.

I think it has something to do with the using the divs to get to a %, and somehow it's not being calculated when trying to move objects.

http://jsfiddle.net/Nineve/yLosx8hd/4/

Set up as files it is here http://www.prestofit.com/zPoF_Floor_Plans/layoutC.html

@jakecigar

jakecigar

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

5 years ago

jQuery drag and drop does not work well with zoom. I think there is a bug reported for it.

JΛ̊KE

Nineve

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

5 years ago

Do you have a suggestion for another way to zoom in and out in this circumstance? I tried using panzoom.js but it seemed to have conflicts with what I already have.

I only need two views, whole layout and zoomed in (ability to pan).

Or would it be better to write the drag/rotate part over? Would not be great since coming this far.

jakecigar

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

5 years ago

I don’t have a solution. Perhaps a different library or going through the bugs @ Search Results – jQuery UI

JΛ̊KE

watusiware

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

5 years ago

Can you explain exactly what "seemed to have conflicts with what I already have" means?

I use jQuery.panzoom, but not with drag-and-drop. But it's in a pretty complex scenario. It's used in a webview in an app, and pans/zooms a container that holds a bunch of overlaid SVGs and canvases (with transparent background). With fabricjs thrown in to boot. It works well for my case. (fabricjs has it's own pan/zoom, but I need to pan/zoom all this other stuff too.)

I had to make the pan/zoom "modal", which isn't ideal from a user perspective. That is, it is either in pan/zoom mode, or not (controlled by an icon you tap). It's a kind of drawing app, and it is very difficult to differentiate intent to draw from intent to pan/zoom!

You might have similar issues. How to be sure what the user's intention is? Pan/zoom? Or drag/drop? It is nearly impossible to place two fingers down on a screen at EXACTLY the same time! (Do you need to support touchscreen, or just mouse?)

jquery.panzoom ultimately just applies a CSS transform to an element. There's less magic than you'd think!

Nineve

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

5 years ago

Hi watusiware!

I've been trying to get this project to work. Had issues with draggable objects when zoomed in behaving badly. So have re-worked the code. Now just need to get positions to save to localStorage.

@jakecigar I hope you can help a bit with getting the JSON code incorporated. I have had little success incorporating it. Have everything but the location save here https://jsfiddle.net/Nineve/zg6a907n/

Also, either of you, if you have any idea why rotate seems a little buggy (does not always rotate when clicked). Typically it ignores the first click.

Thank you in advance!

Nineve

jakecigar

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

5 years ago

https://jsfiddle.net/jakecigar/zg6a907n/13/ rotates.

Try Adding the localStorage.

JΛ̊KE

jakecigar

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

5 years ago

https://jsfiddle.net/jakecigar/zg6a907n/14/ has the place for you to add the localStorage code,

JΛ̊KE

Nineve

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

5 years ago

I'm trying, I know I'm slaughtering it.

Will continue trying with your new JSFiddle.

Thank you, I'll post again when I have something put in there.

jakecigar

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

5 years ago

I am purposely trying to give you one hint at a time. You need to make the final code your own.

JΛ̊KE

Nineve

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

5 years ago

I appreciate that, and I'm trying.

Nineve

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

5 years ago

Nope, I'm just slaughtering it.

https://jsfiddle.net/k8p5z1of/1/

jakecigar

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

5 years ago

Inside onComplete, you need to get each style attribute and store them in a localStorage. Don’t bother trying to use this, or this.anything.

JΛ̊KE

Nineve

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

5 years ago

https://jsfiddle.net/Nineve/5fqto9bp/2/

Still not getting it. Am I even on the right track? I am completely stabbing in the dark.

jakecigar

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

5 years ago

you have no variable named positions. You really have no variables at all.

JΛ̊KE

Nineve

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

5 years ago

https://jsfiddle.net/Nineve/5fqto9bp/4/

So I want x, y and clicked. (I think)

jakecigar

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

5 years ago

https://jsfiddle.net/jakecigar/wmL314je is close. Maybe we can’t simple store the style attribute.

You may have to store each setting that is changed. Lots more code.

JΛ̊KE

jakecigar

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

5 years ago

I will be away for a few hours. Chat ya in 4 hours.

JΛ̊KE

Nineve

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

5 years ago

Thank you!

Just for clarification, it seems to be working well except after a reload, when you try and move an object it flicks it into upper left corner.

Not sure if it's still acting buggy with the rotation, or if it's just me.

Let me know if you have any ideas.

Thanks,

Nineve

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

5 years ago

Hi Jake,

I've been trying to get a shift click implemented so that multiple objects can be dragged at one time. I'm very close, I think.

I can't seem to get it to remember the location of all of the objects when dragged as a group.

https://jsfiddle.net/msxsfoee/5/

What am I missing. Also, when I have it in a web page it acts buggy on the dragging multiples, but not in JSFiddle.

Hope you have time to help and some ideas.

Thanks,

Nineve

@jakecigar

jakecigar

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

5 years ago

The drag callback is used to keep them moving. The stop event is when you update the localStorage.

JΛ̊KE

Nineve

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

5 years ago

I'm sorry, I don't get it.

I've tried multiple ways to include both parts in different fashions. Either it does not change anything or it breaks it.

This one seems like the most logical one, but it doesn't work either.

selectedObjs.each(function () {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
})

jakecigar

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

5 years ago

Add debugging code.

console.log(this);

Then get the position using normal jquery. It is not given to you with ui.position. You just get one position with it.

JΛ̊KE

Nineve

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

5 years ago

Is this getting closer?

selectedObjs.each(function () {
positions[this.id] = l, t
localStorage.positions = JSON.stringify(positions)
})

Here is updated JSFiddle https://jsfiddle.net/Nineve/yk2vpLem/1/

jakecigar

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

5 years ago

No. But

$this =$(this);

var p = $this.position();

is getting close.

JΛ̊KE

Nineve

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

5 years ago

I think I got it https://jsfiddle.net/Nineve/yk2vpLem/2/

It seems to be working.

Did I do it correctly?

Nineve

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

5 years ago

Issues are;

• If something is rotated and dragged as a group, the rotated object is buggy (slides wrong direction).

• Even if rotated object moved with group doesn't go out of bounds it does not remember that it is rotated if page reloaded. (I'm not really concerned with this, but if you have ideas...)

• I would like all of the objects to not start off all piled up. The code relies on positioning to be absolute. Which is what is causing the pile-up. Don't know if I should try and make the objects change class once interaction has occurred (dragged, shift-clicked, or clicked), I can load them up with no absolute positioning.

Any ideas?

Thank you again for all of your help!

jakecigar

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

5 years ago

For each div, you could randomly or sequentially assign locations using javaScript or default CSS classes.

.position() does not have the rotation, you need to add it like I did before.

JΛ̊KE

Nineve

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

5 years ago

As all of the boxes will be different sizes, I don't think I can sequentially assign locations, and because I want them to not just be all over the page, I don't want them random.

I've tried to make them a default class that changes once select, but that did not work.

Been trying to add a last select functionality but having trouble saving all locations again. Every time I try adding JSON it breaks those lines.

https://codepen.io/Nineve/pen/ooLjgV

Also, is it possible to either save the JSON file to an external file or database rather than relying on local.storage?

watusiware

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

5 years ago

You cannot save to a file. Imagine the chaos if random websites could write files to your computer!

You can use Ajax to send the data to a server. You will have to write some code in some server language to save the data to a database.

There are client-side database implementations, but not universally available on currently-deployed browsers. Here's a good overview of client-side storage capabilities:

https://www.html5rocks.com/en/features/storage

There are some libraries that abstract client-side storage. They can give you, for example, an API for key-object store, without you having to first convert data to a string.

Nineve

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

5 years ago

I guess I was not too clear, I didn't mean to save the file on the users computer, didn't know if there was a way to save a file to the server, other than to a database.

Thank you for the link I will read through it.

Nineve

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

5 years ago

From your link it seems there are a few ways to save things locally, but seems as much of a hassle as just doing it in MySQL.

watusiware

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

5 years ago

Javascript running in the browser cannot do ANYTHING on your server!

It can only make a a request to the server. You can use Ajax to send a request to the server without changing the page. What the server does with the request is up to you. You will need to write some code in some server language.

You don't have to save it to a database on your server. You could save to a file. You'd have to have a different file for each user! Again, it is up to you to write some server code to do whatever you'd like with the request.

Nineve

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

5 years ago

Wouldn't an Indexed Database count? It's stored so you don't have to be online.

Nineve

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

5 years ago

The whole reason I'm revisiting this, is that clearing browser history will clear all saved JSON info. Want something more permanent, less likely to be deleted by the user.

watusiware

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

5 years ago

Wouldn't an Indexed Database count?

https://caniuse.com/#search=indexeddb

It's available on 87% of browsers world-wide, 83% in U.S.

You can use it if you can live with that.

Different browsers might provide a separate checkmark to clear indexed dbs. Or not.

Nineve

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

5 years ago

Just need it on up to date chrome and safari.

Nineve

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

5 years ago

I don't know how to convert the current JSON lines to use indexed database. Is that something easy or should I just keep researching MySQL? Been a very long time since I've done anything with it.

jakecigar

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

5 years ago

There is no magic way to save a JSON string in an indexDB. It is a bunch of code. Nor, is there any protection from the user clearing the cache and indexDBs.

Use the server/MySQL. Use Ajax.

JΛ̊KE

watusiware

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

5 years ago

You may find SQLite to be a good light-weight alternative to MySQL. It is a much "lighter" install. It may not be great for heavy-lifting, but it has essentially no limitations on size of data or database, and takes a simple installation of library and command-line tools on your backend system. Each SQLite database is contained in a single file. There is no "SQL server" per se. You just call the library from your server code. The database code runs in-process in your server code. (Instead of making requests to a separate SQL server.)

You didn't mention what server language you might use. A lot depends on what language(s) you know or think you might easily pick up.

node.js would let you use Javascript on your server.

My preferred solution for quick/easy/small servers would be Ruby with Sinatra and Sequel. You can write a simple service in just a few lines of code, and even with database storage you can write truly useful servers in 100 lines of code or less.

I have a simple server that accepts JSON POSTs and stores them in an SQLite database, written in Sinatra. It is in 70 lines of code!

With node.js/Express, you might use sequelize, though I think it is much more difficult to get started with it than ruby/Sequel. You have to have a good handle on Javascript Promises to use sequelize.

They are both very similar environments. Express was modeled after Sinatra.

FWIW, I like Db Browser for SQLite for "manually" working with SQLite databases. It's available for Mac/Linux/Windows. You can easily view and sort tables, add/remove data, try out SQL commands. There are a bunch of others, (as well as similar for MySQL or PostGrsel or whatever) but I like it's simplicity.

Nineve

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

5 years ago

Thank you both for responding. I don't know much, but some of those things you mentioned watusiware I have not even heard of. So will try to work it with ALEX and MySQL.

I'm trying to get the information called for, (sent to console) just so I can figure out what is what.

With this code

$(".box").each(function (index, value) {
console.log($(this).attr("id"), ui.position);
});

I think I should be getting back each id and each of their locations, but just getting each id, and the location of what was moved. See codePen here https://codepen.io/Nineve/pen/dZOmVg?editors=0010

What am I doing wrong?

I also have to add the rotation information into the mix, I really want to make it save with a button, not automatically. Or am I wrong thinking that would save a lot of memory?

If I break variables out of their function will it break that function?

Nineve

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

5 years ago

Ohhhh I think I got it!

$(".box").each(function (index, value) {
console.log(this.id, positions, $(this).css("transform"));
});

jakecigar

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

5 years ago

$(".box").each(function (index, value) {

does not give you a ui, so it can’t work.

You need to use $(this).position() to get the position. We went through this before.

JΛ̊KE

Nineve

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

5 years ago

I'm very sorry, I'm trying to understand.

Nineve

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

5 years ago

That last code I posted is giving me back info, just too redundant atm. So I don't understand why index, value can't work, when it kinda is.

Nineve

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

5 years ago

Ok, so I needed to be more specific. with

$(".box").each(function (index, value) {
console.log(this.id, $(this).position(), $(this).css("transform"));
});

Not that I need to change line 1.

Am I understanding you correctly?

jakecigar

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

5 years ago

Since positions is always kept updated, just use it. You don’t have to re-compute it.

Just send that string to the server when it changes. And get it back when you start off.

JΛ̊KE

Nineve

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

5 years ago

So are you saying do not do "each" just send the info on that object that was moved or rotated?

Or are you saying I'm calling it incorrectly?

jakecigar

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

5 years ago

You do not have to add an each when you save the positions to the server.

You just need to call $.post and pass JSON.stringify(positions) to the server.

JΛ̊KE

Nineve

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

5 years ago

@jakecigar

So I would do this?

Where info.JSON would be a blank JSON file On Server

$.post('info.JSON', data, function(response) {
this.id, $(this).position(), $(this).css("transform")
}, 'json');

Or should I be saving it to a blank .php file?

Or should I be saving it to a mySQL database?

Still trying to wrap my head around this.

Any assistance would be appreciated.

watusiware

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

5 years ago

So will try to work it with ALEX and MySQL.

What is ALEX? I have never heard of it, and searches come up blank. Did you mean Ajax?

jQuery can't do anything with MySQL. Ajax can't do anything with MySQL. You can use Ajax to send data to a web server. You need to write code for the server to do something with the data. jQuery has an API for sending the data using Ajax:

https://api.jquery.com/jquery.ajax/

You need to pick a server language, and write some code for the server. Is there a server language you are familiar with? Your server code would store the data in MySQL and retrieve it.

PHP is probably the most popular server language. I am not a fan! Javascript is a trending server language. You can use the same language both in the browser and on the server. Python, Ruby, and Java (which is not the same as JavaScript) are also popular server languages. Pick one. There are libraries for each that make it easy to write a simple service and that make it easy to connect to a database. I named a couple of them.

Nineve

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

5 years ago

watusiware- yeah, that was just a typo. Thank you for the link.

Jake - I've tried adding this

var positions = JSON.parse(localStorage.positions || "{}");
$(function () {
var d = $(".box").attr("id", function (i) {
return "draggable_" + "v1_" + i; // Use "_v#" for version control
});
$.each(positions, function (id, pos) {
$("#" + id).css(pos);
});
d.draggable({
stop: function (event, ui) {
positions[this.id] = ui.position;
localStorage.positions = JSON.stringify(positions);
var newTransform = $(this).css("transform") == 'none' ? "rotate(90deg)" : "";
$.ajax
({
type: "PUT",
dataType : 'json',
async: false,
url: 'example.json', //blank json file on server
data: { data: JSON.stringify(positions) },
success: function () {alert("Success"); },
failure: function() {alert("Error!");}
});
console.log(this.id, $(this).position(), $(this).css("transform"));
}
});
});

and get the error

"Failed to load resource: the server responded with a status of 405 (Method Not Allowed)"

What am I doing wrong?

watusiware

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

5 years ago

Don't use async false. It is deprecated in most browsers and will eventually be completely disabled in all browsers.

Your server sent the 405 error. Did you write some code in some server language to accept a PUT on that URL and do something with the data? Your server response is saying "no".

You should test your server code first. One way is with command-line cURL. Or, there are browser extensions for that make it easy to test Ajax requests.

Nineve

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

5 years ago

I actually changed it to async true, but should I remove it entirely?

I don't understand your second question, so no. I thought it would accept automatically. Would I put that in my PHP?

Is this what I should use https://curl.haxx.se? or would it be easier to get a browser extension?

What will I need to do to make my server accept the post/put/get.

I'm not even sure I've written the AJAX code correctly. Do I just make a blank JSON page and direct it to save to it, or do I use the page everything is on (currently have PHP, CSS, and jQuery on one page)? Hope that question makes sense.

Will this whole process achieve a saved version of the data that can not be easily accidentally erased by clearing history or cookies? I'm going on the assumption that it will, but at this point feel I can't make any assumptions.

watusiware

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

5 years ago

url: 'example.json', //blank json file on server

That's not how servers work. The server doesn't magically store the data in a file. You need to write some server code!

And even if it worked the way you are thinking it works, it would overwrite the file every time, and would not keep track of each user's individual settings.

watusiware

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

5 years ago

You have some learning to do about writing code for servers. If you are using PHP - yes, you need to write some PHP code.

The fact that you got a 405 back says that the jQuery code worked. It sent the data to the server, the server didn't know what to do with it, and sent an error code back.

async: true is the default. Yes, you can remove it entirely.

You will need to get advice on PHP from some PHP forum, or dig into some tutorials.

Nineve

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

5 years ago

Thank you.

watusiware

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

5 years ago

Please use "reply" at the end of the comments. When you comment on a comment, your comment is buried and may never be seen! (Not sure why the forum even has that feature!)

There is no "should". Do as you please with your server code.

It doesn't make any sense to save to a PHP file.

You could save to a .json file if there will be exactly one user!

If you have a SMALL number of users, you might save to a JSON file with a different name for each user.

Most developers I think would use a database!

None of this has anything to do with jQuery. You will need to learn how to use your server language (I guess PHP) to save/retrieve from a database, and to maintain sessions. We can't offer more than very basic PHP help.

You haven't said if you have logged-in users or not. If you have logged-in users, you can save permanently in some table that associates with the user. Otherwise, you will need to create a session, and expire the session after some time, to keep the database from growing infinitely.

$.post('info.JSON', data, function(response) {

Will not do what you think it does. That was already explained. It will send data to a URL "info.JSON" not a FILE "info.JSON". You need to write some PHP code that will take the data that the browser sends and then do something with it. Most of us would not call the URL "info.JSON", because it is confusing.

Nineve

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

5 years ago

Sorry, I will be sure to use the bottom reply only.

I'm sorry if I am being redundant. Just struggling with this so much I keep going in circles.

I will only have a handful of users. They can all contribute to the same page, so will not need to make them each unique databases.

So, if I am understanding you correctly, I need to write AJAX out more like this;

$.ajax
({
type: "PUT",
dataType : 'json',
url: '?',
data: { data: JSON.stringify(positions) },
success: function () {alert("Success"); },
failure: function() {alert("Error!");}
});

I hate to ask what must be an obviously stupid question, but what do I put for URL? The URL of the php page that then tells the mySQL database it's ok to post?

And then tell PHP to be looking for it and then approving it to send to the mySQL database on the server.

Similar to this?

https://stackoverflow.com/questions/5143191/inserting-into-mysql-from-php-jquery-ajax

watusiware

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

5 years ago

THE URL is whatever you want. You need a URL on your server that will run some code to accept the data in the request and do something with it.

We've answered your jQuery questions. You've done what you can with jQuery. jQuery CANNOT do anything on your server! Just make a request containing the data. You need to write code in PHP to receive the data and do something with it.

You need to find a PHP forum to ask your PHP questions.

The Stackoverflow you linked to gives a general idea of how to do this in PHP, and provides an example. I can't vouch for it, because I do not use PHP. I could tell you how to do it in Ruby. ;)

It's a common need, there have to be dozens if not hundreds or thousands of PHP tutorials on how to do this. Google is your friend. SO isn't the best place to learn! Find a good (modern!) book or tutorial site for PHP.

Top Reply

Response title

Attachments

Replies(80)

Statistics

Tags

Actions

Related Posts