Jump to content
GreenSock

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

Misbehavior of draggable knob while in fixed positioned context

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

Hi and welcome to the GreenSock forums.

 

Yeah that's quite weird actually. I'll summon our beloved master @GreenSock so He can take a look at this.

 

Please stand by a bit...

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

Yeah, it does seem pretty odd to have position:fixed nested like that, but I think I've got a workaround in place that'll still allow that to work regardless of the nesting. Again, try this preview (uncompressed) of the upcoming release: 

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

 

Better? 

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

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.

×