Jump to content
Search Community

Misbehavior of draggable knob while in fixed positioned context

marcelf 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

Hi there,

 

in one of the projects i am currently working on, i implemented a "Draggable" (nothing special) to provide some kind of knob for the user. 

 

Everything works fine as expected, until the DOM-structure has been changed (unfortunately it has to be that way). The knob now shows some strange behavior. 

 

I forked a PEN (

See the Pen ywpet by GreenSock (@GreenSock) on CodePen

 -> ) to show what i mean and only added some HTML and CSS to build a minimal setup. The problem is, that the mouse is not following the knob-handler as precise as before.

 

Does anyone knows this behavior and has some hint for me?

 

Thanks in advance!

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

Link to comment
Share on other sites

Ah, very interesting. It had to do with the fact that you were nesting it inside a position:fixed element and the origin of rotation was being miscalculated. I believe I've got it fixed in the upcoming release which you can preview (uncompressed) here: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? 

  • Like 2
Link to comment
Share on other sites

Thank you for the quick response @GreenSock  and @Rodrigo. The fix (.../16327/Draggable-latest-beta.js) apparently works for a simple nested structure only. I extended the example PEN (

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

) by another relative positioned div-element which will again break the mouse-behavior.

 

As i mentioned, the DOM-structure unfortunately cannot be changed - and there are more nested elements until the fixed positioned element comes up.

 

Again, thanks in advance.

Link to comment
Share on other sites

4 hours ago, marcelf said:

As i mentioned, the DOM-structure unfortunately cannot be changed

 

Why can't it be changed? You do have JavaScript at your disposal, which means you can change pretty much anything.

 

Fixed elements really should not be nested not like that because they aren't part of the document flow. They are positioned relative to document element or nearest positioned ancestor i.e. the body. 

 

 

  • Like 4
Link to comment
Share on other sites

Hi @marcelf and welcome to the GreenSock Forum!

 

Like @OSUblake advised nesting fixed elements is not good. But sometimes you have to work around existing bad markup and styles from a CMS or template you didn't build. But there is good news since you can work around such things with just some minor tweaks to your CSS. ;)

 

You can fix this by adding the following CSS.

 

.wrapper_relative {
  position: static;
}

.wrapper_relative > .wrapper_relative {
  position: relative;
}

 

The position: static makes sure that the top parent is in the flow of the document. And allows its first child has position: relative so your nested fixed element can be positioned relative to its first parent to allow the knob to rotate properly.

 

See the Pen WPpmyN by jonathan (@jonathan) on CodePen

 

Happy Tweening :)

 

  • Like 4
Link to comment
Share on other sites

6 hours ago, GreenSock said:

try this preview (uncompressed) of the upcoming release: 

 

If you're working on Draggable, I was wondering if you could implement this feature request that I totally forgot about. A grab cursor that changes to grabbing when pressed should be the default.

https://greensock.com/forums/topic/15705-draggable-improvements-snapping-and-position-properties/?tab=comments#comment-76829

 

 

 

  • Like 2
Link to comment
Share on other sites

Your wish is my command, @OSUblake. I implemented it exactly as you requested, including activeCursor. I didn't make grab/grabbing the default, though, because I'm a bit worried it'd prompt backlash from current users who rely on the "move" cursor. In other words, that'd sorta be a "breaking change" (well, if you could call the cursor change "breaking") and I'm not sure this warrants it. Ya think? Oh, and apparently grab/grabbing aren't supported in some browsers like IE and iOS Safari as well as some others. 

 

But you can totally do cursor:"grab", activeCursor:"grabbing". Or even cursor:false. 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

  • Like 2
Link to comment
Share on other sites

Sorry for the late response. @OSUblake you are right, nesting fixed elements within such a structure is not the right way and yes, with JS i can change pretty much everything - but in this case its a complex project setup/structure and i dont know the impact if i change the DOM structure. 

 

"Resetting" wrapping elements to position "static" was helpful, thank you everyone!

Link to comment
Share on other sites

  • 9 months later...

Hi everyone,

 

I'm trying to show a draggable circle inside a popin (fixed positionning). But as soon as I scroll down, it seems like the circle positions are translated (not visually). As a result, I can't drag the knob anymore.
I've made a simple pen describing my problem.

 

See the Pen eYYwgWK by lyes-moitrankill (@lyes-moitrankill) on CodePen

 

Is there a simple way to make this work ?

Link to comment
Share on other sites

Hey flsk13 and welcome to the GreenSock forums! Thanks for being a Shockingly Green member - we couldn't do what we do without people like you.

 

This looks like a bug to me. An edge case that @GreenSock will need to fix. Sorry about that! We switched how Draggable works in GSAP 3 to work across more circumstances and be more performant but it appears we missed this edge case.

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