Jump to content
Search Community

PHP not playing nice with Draggable

Nineve test
Moderator Tag

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'm having several issues, but one I am focused on atm, is that something seems to be conflicting between the draggable.min.js file and my PHP. It messes up the div sizes, when I add <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/utils/Draggable.min.js"></script> to my php file. I'm sorry if this is a really dumb question.


Thank you in advance for any help!




Link to comment
Share on other sites

Hi @Nineve :)


Welcome to the forum. 


I'm not exactly sure what you mean by draggable messing up div sizes, but the first thing I'd recommend trying is switching to the latest version of TweenMax and Draggable. The version you're using (1.16.1) is over two years old. Here are the links:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>


I'm not sure if that will solve the problems you're experiencing, but it's worth a shot. To better assist you, we'd like to see a demo of the problem. If you could create a CodePen for us, that would help in providing you with the best answers. Here's some info about that.


Thanks and happy tweening.


  • Like 4
Link to comment
Share on other sites

Hi Craig,

Thank you helping. It did help in Safari, but not in Chrome.

You can see it being implemented here http://www.prestofit.com/zPoF_Floor_Plans/working10.php

The second line on each box gives the dimensions, you should be able to see how they are definitely off with the drawn size of the div boxes.

I will do some more research to see how to post a php page and link a csv file in CodePen. Unless you know that can not be done there.


Thanks again,


Link to comment
Share on other sites

Welcome to the forums, @Nineve. I didn't have time to analyze everything, but I wanted to offer a few comments:

  1. It looks like you're changing the x/y values of the target directly inside your Draggable's onDrag which strikes me as a bit dangerous because it's like you're fighting with Draggable itself to control the same properties. I'm curious what your goal is there.
  2. I don't think the "zoom" property is widely supported, though I could be wrong.
  3. Just to be clear, GSAP can't affect PHP because it is only JavaScript which runs client-side in the browser. 
  4. You don't need to put PHP in codepen - maybe you can just take whatever HTML gets shipped to the browser by your php page and put THAT in codepen. See what I mean?
  • Like 3
Link to comment
Share on other sites

Thank you Jack,


To answer some of your concerns:

1. I am using that so that json remembers the location of the objects.

2. The zoom works as long, but with json I need the locations.

3. When I remove the <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>, but of course then the objects are not draggable.

4. I will see about doing that.


Thank you,


  • Like 1
Link to comment
Share on other sites

Hello @Nineve .. Yeah Jack is right about the zoom property


The CSS zoom property is not even compatible in any version of Firefox. So you should really be using CSS transform scale instead of zoom if you want full cross browser compatibility.


Its not really a good thing to use the zoom property! Its only purpose was to fix bugs in earlier versions of IE's hasLayout property, which was riddled with render bugs. Also when you use the CSS zoom property in Chrome, it will have to apply it twice.. first for zoom property and then again with transform scale property. So your looking at a performance hit in Chrome.


If i were you, as best practice I wouldn't use the CSS zoom property, but just use the CSS transform scale for a much happier animation. :)


  • Like 3
Link to comment
Share on other sites

Hi Jonathan,

Thanks for giving me the option, I will see what I can do to change it. So you believe that is what is causing the issue? Basically I really only need three states of zoom anyway 50%, 100% and prob 150%. But without some sort of zoom, the project will be less viable.


Actually I only need it to be compatible with Chrome, Safari would be nice, but not counting on Firefox at all. It's an in-house project not meant to go to live web for everyone's view.






Link to comment
Share on other sites

BTW I got this route from this page 


See the Pen zxQyxq by MAW (@MAW) on CodePen



Because now that I've gone back to basics, I'm having problems with draggable items acting glitchy (not recognizing zoom). See example here.


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



Once I get that glitch of the movement on zoomed items I need to figure out how to save locations, rotations with zoom in mind to JSON.


Any continued assistance would be very much appreciated!




Link to comment
Share on other sites

Hi @Nineve


Use scale instead of zoom. Problem solved.


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



Serializing and deserializing the position and rotation of draggables should be real easy. In that demo, you can loop through the array of draggables like this.

draggables.forEach(function(draggable, index) {

  var target = draggable.target;
  var transform = target._gsTransform;
  console.log("Rotation", transform.rotation);
  console.log("X", transform.x);
  console.log("Y", transform.y);


  • Like 7
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.
  • Create New...