Jump to content
GreenSock

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

Draggable div always goes to the top of page instead of where you throw it

Recommended Posts

Hello, 

 

As said above, I am having an issue where when I throw or drag the draggable div it is always bound to the top of the page like a magnet. I didn't set it like this, and can't figure out how to let it move where ever it is being thrown. Does anyone know why this is happening?

 

Here is the link to the repository and to the site. 

https://github.com/jacobtruax/Mole-End

https://jacobtruax.github.io/Mole-End/

 

Thanks

Link to comment
Share on other sites

Your #container bounds has no height. It's 0 pixels tall so the draggable element always snaps back to the top of it.

  • Like 1
Link to comment
Share on other sites

Oh wow you are right not sure how I didn't notice that. I know questions on here should be GSAP specific but do you know why the height class on the container is not working? I have it set

Link to comment
Share on other sites

It looks like that rule isn't being applied to the container on larger screens. You're only setting that height on max 750px in the media query. If you change that, I think you'll be all set.

 

Happy tweening.

:)

 

PS The media query block also isn't closed — just FYI.

  • Like 1
Link to comment
Share on other sites

Thank you for that! Everything is fixed and pushed to github. I had another question, I am trying to create a different bounding area now. I have it set up like this bounds: {top:200, left:0, width:1000, height:800} but is there a way to make the width something like 100vw? Can I make a variable that is the width of the window and add the variable as the unit? 

Link to comment
Share on other sites

The easiest way would be to set bounds to a container and the container would have a width of 100vw. But you can certainly use a variable as the minX/maxX value for the bounds. Keep in mind that you'll need to applyBounds for a resize event in a case like that.

 

https://greensock.com/docs/Utilities/Draggable/applyBounds

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Ah yes that makes sense. A lot more simple! I tried but there still seems to be an issue. As you can see the container is below the top header, but for some reason the draggable item no longer goes to the bottom of the page. (Same github link)

 

Thanks so much

Link to comment
Share on other sites

Your stylesheet is targeting the class .container rather than the ID #container. The bounds are set to #container. Please try setting the bounds to .container and I think you'll be good to go.

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

You're dragging a position:fixed image.

 

/* change this */
div.on {
  position: fixed;
  bottom: 200px;
  right: 200px;
}

/* to this */
div.on {
  position: absolute;
  bottom: 200px;
  right: 200px;
}

 

See the Pen pXgeya by PointC (@PointC) on CodePen

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