Jump to content
GreenSock

redon77

draggable strange behaviour in 0.9.8

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

Hello

 

today I installed the new version of draggable (VERSION: 0.9.8)

and (some) of my draggables jump about 250 pixel to the right when they are selected.

 

Going back to version 0.9.6 they behave like I expect and as they should.

 

What changed from 0.9.6 to 0.9.8 so that I can adapt my code?

 

Thank you

Link to comment
Share on other sites

Sorry to hear about the trouble. I'm looking into a potential regression related to bounds calculation - it would really help if you could post a simple codepen or jsfiddle that clearly demonstrates the issue. Any chance you could provide that? In the mean time, feel free to revert back to 0.9.6. 

Link to comment
Share on other sites

No problem

 

I like GSAP very much! 

 

The hole project is quiet complex and I am not very familiar with codepen and jsfiddle. Maybe two screenmovies can help?

 

 

part of my code:

   /** make dragItem draggable */
   this.dgbs = Draggable.create(this.dragItem.d, {
      type: 'top,left',
      edgeResistance: 0.5,
      bounds: {top: 0, left: 0, width: dob.w.w, height: dob.w.h},
      throwProps: true,
      onDragStart: function() {
         window.dm.startDrag();
      },
      onDrag: function() {
         window.exc.drag();
      },
      onThrowUpdate: function() {
         window.exc.drag();    
      },
      onThrowComplete: function() {
         window.exc.drag();    
      },
      onDragEnd: function() {
         window.exc.xRew = this.xTgt;
         window.exc.yRew = this.yTgt;
         window.dm.endDrag();
      }
   });

0_9_6.mov

0_9_8.mov

Link to comment
Share on other sites

What I really need to see is the css applied to the container element (and its ancestors). I need a testbed that I can experiment in, and see exactly what styles and JavaScript values are being set when and where. So unfortunately the videos don't help, nor does the isolated Draggable.create() code. I sure appreciate you posting that stuff, though. Can you recreate something basic in Codepen or jsfiddle? Here's a codepen you could fork if you'd like: http://codepen.io/GreenSock/pen/irzvd

Link to comment
Share on other sites

Hi,

 

I don’t know about redon’s bug, but Draggable 0.9.8 doesn’t work much in Opera (at least Mac, Opera 12.x).

 

Even in the greensock demo. It’s not moving at all.

But I know the onDrag, onDragStart, etc., are being detected and triggered because of the project I’m working on.

Link to comment
Share on other sites

Thanks for reporting this Cyboide, and sorry about the confusion. Stand by, we're looking into it. In the mean time, just revert to the last version and you should be golden. The biggest upgrade in the most recent version had to do with accommodating transforms (rotation/scale/skew) in the parent (or any ancestor) element.

Link to comment
Share on other sites

Just to give you an update, I have narrowed this down to a browser bug that causes offsetTop/offsetLeft to incorrectly report as 0 when the parent element has a transform applied. Really weird, right? Gotta love browser bugs. I'm still trying to figure out an elegant way around it. Please stand by...

Link to comment
Share on other sites

Wow, that was a pretty weird browser bug, but I think I've figured out a way around it - would you mind testing the attached update and letting me know if it works as expected for you? 

 

This should fix both the shifting and the Opera issue. Don't forget to update Draggable, TweenMax, and CSSPugin.

GSAP_1.11.4_preview.zip

  • Like 2
Link to comment
Share on other sites

I updated all the files – still jumping 

Replaced Draggable 0.9.9 with version 0.9.6 and it's working fine.

 

Sorry I don't have better news

 

I will try to make a codepen.

In your pen I can not see how you attached Draggable. Could you help me with that.

 

 

Thank you

Link to comment
Share on other sites

Yes, a codepen would be REALLY helpful, thanks. 

 

Just click the "fork" button at the top - it is already loading this updated Draggable file (I just updated the codepen). If you toggle open that settings cog next to the "JS", you'll see where all the JS files are loaded. You could drop regular <script> tags into the HTML area instead if you prefer. 

 

Once you try codepen and get the hang of it, you'll love it.

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.
×