Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
WeberMaschinenbau

Draggable placeholder div / changes between 0.14.3 and 0.15.1

Recommended Posts

Hello,

 

currently I am trying to update a project from gsap 1.18.2 to 1.20.2. The project uses Draggable with type: 'scrollTop' for some scrollable views. 

 

With the new version of Draggable the `_placeholderDiv` div element gets added to those views on drag. This results in some undesired behaviour - width of lists are now wrong, because the parentNodes width is added to the placeholder div.

 

Looking through the gsap versions, a change was introduced in version 1.19.0

 

Before:

 

if (self.autoScroll && !rotationMode && !scrollProxy && target.parentNode && !target.getBBox && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode) {//add a placeholder div to prevent the parent container from collapsing when the user drags the element left.
  _placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px";
  target.parentNode.appendChild(_placeholderDiv);
}

 

After:

 

if (target.parentNode && (scrollProxy || (self.autoScroll && !rotationMode && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode)) && !target.getBBox) { //add a placeholder div to prevent the parent container from collapsing when the user drags the element left.
    _placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px";
    target.parentNode.appendChild(_placeholderDiv);
}

 

 

In 1.18.2 the conditional tested for !scrollProxy. Current versions test for scrollProxy.

 

Is this change on purpose? And if, how do I disable the insertion of the placeholder div (besides disabling it in the Draggable source code)?

 

 

Cheers!

Christian

Link to comment
Share on other sites

Hello @WeberMaschinenbau and Welcome to the GreenSock Forum!

 

Sorry your having this issue. So we can better help you by seeing this issue in a live editable environment. Can you please setup a reduced codepen demo example so we can test this issue in replicated example.

 

 

Thanks! :)

  • Like 1
Link to comment
Share on other sites

Hello Jonathan,

 

yes, sure.

 

1.18.2 example:

See the Pen zdxYop by anon (@anon) on CodePen

 

Same code, with 1.20.2:

See the Pen EvaxbR by anon (@anon) on CodePen

 

 

BTW: Codepen latest does not use 1.20.2. Had to set it explicitly.

 

Cheers

Christian

Link to comment
Share on other sites

Excellent, thanks for the demo(s). I think you're absolutely right. You can preview the upcoming release of Draggable with this fix in place, uncompressed, at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

And a fork of your demo: 

See the Pen 5822ba29656e2fb8849da9af47da76fc by GreenSock (@GreenSock) on CodePen

 Better?

  • Like 2
Link to comment
Share on other sites

Looking good, thank you!

 

Any ideas when the new version will be released approximately?

 

Thanks again,

Christian

Link to comment
Share on other sites

Not entirely sure yet, but likely within 2-4 weeks. Feel free to use the beta in the mean time.

  • Like 1
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.
×