Jump to content
GreenSock

Nineve

Draggable, Rotate, Zoom assistance with Snap & saving locations

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've been going in circles trying to solve one issue or another. 

 

I would be very grateful for any assistance if anyone can tell me how to fix several things with CodePen called "zoom" (bottom of page);

• Can not figure out how to add Snap to Draggable so that a div box object will snap to another div box object.

• How would I add JSON and AJAX so that it remembers locations (I've added JSON location to the JQuery CodePen below). I want to eventually add AJAX/PHP so that it remembers more permanently and can't be erased by  clearing history.

 

 

 

How I got here: The CodePen called zoombar is an attempt to correct several issues with just using JQuery and browser zooming in/out. Here is the CodePen called Back to basics of the base JQuery file I was working on. 

See the Pen KymdQP?editors=1011 by Nineve (@Nineve) on CodePen

 

The issue with base JQuery (Back to basics) file were;

• Locations would glitch with zoom (I know location can not be accurately defined with most zooms, including browser)

• Rotation glitches with snap (on two sides) Rotations does not seem to recognize shape of box has changed as a result.

 Among others.

 

Any help would be great, thank you in advance.

 

 

See the Pen bYWvgm by Nineve (@Nineve) on CodePen

Link to comment
Share on other sites

Hope the post makes sense, posted two ways I've been trying to get this project done. Didn't know it would put the main CodePen on the bottom of the post. 

:?

Link to comment
Share on other sites

Stop messing with zoom, and forget everything you know about it. It's a non-standard feature, and it may be removed from a browser at any time. Use scale instead. It does not affect the layout. Zoom is an OLD property from Internet Explorer 5.5, and was used to scale content long before scale transforms became available. That's the best advice you're going to get from here or anywhere else.

 

Follow that demo I made for you. It works.

 

For saving the locations to a database, do it just like you're doing with local storage. If you plan on having multiple people using the app at the same time, I would recommend using a realtime database like Firebase. Otherwise you're going to have to deal with people making changes at the same time.

https://firebase.google.com/products/realtime-database/

 

Here's a draggable demo I made using Firebase. It's completely serverless, so no dealing with programming a back end using something like PHP. Everything is done using JavaScript. Open your browser up in 2 different window to see it update in realtime. 

 

See the Pen gPeeJN by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Hi OSUblake,

I debated whether I should post a continuation on the last post. I thought your post to it was going to solve my problem, but I could not figure out how to adapt it to the php loading divs (you specified the box sizes in the script, and I just could not figure out how to separate it so it was reading from the HTML produced by the PHP), then I came to what I thought was a solution. To just let the browser zoom in and out using its native method. Then I began to notice it was making divs act strangely. So thought I would revisit this, hence the going in circles.

 

Thank you for the link for the saving of locations, I will try and figure that out. 

 

Can you tell me how to separate the sizes for the boxes from the script so I can call on them dynamically?

 

Also, is there a way to add snapping to make divs snap to other divs (not a grid)?

 

Thank you for your quick response, especially on the weekend.

 

 

Link to comment
Share on other sites

I think I am getting somewhere with it. I will post more tomorrow. Again, thank you for your help.

Link to comment
Share on other sites

3 hours ago, Nineve said:

I thought your post to it was going to solve my problem, but I could not figure out how to adapt it to the php loading divs (you specified the box sizes in the script, and I just could not figure out how to separate it so it was reading from the HTML produced by the PHP), then I came to what I thought was a solution.

 

Can you tell me how to separate the sizes for the boxes from the script so I can call on them dynamically?

 

I'm not exactly sure what you mean by that. I added the box sizes to the data object because I was showing how you could possibly create everything dynamically. Instead of having of your php create the html for the boxes, you get some JSON data similar to that from your server, and create all the boxes dynamically with JavaScript.

 

3 hours ago, Nineve said:

Also, is there a way to add snapping to make divs snap to other divs (not a grid)?

 

There isn't a built-in way to do that with boxes, but it could be done with a little work by snapping to points. You can read more about point snapping and check out some demos here.

https://greensock.com/1-20-0

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×