Jump to content
Search Community

Draggable item in Parent with Zoom - position fix?

Praney Behl test
Moderator Tag

Go to solution Solved by Diaco,

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 guys,

 

I have recreated the problem as the title states. I have a div that has a zoom and a Draggable item inside it. On zoom = 1 everything works great but if you change the zoom the Draggable position is out.

 

While using jQuery-UI Draggable I was able to fix the issue by the following code:

var zoom = $("#main").css("zoom");

$('svg').draggable({
drag: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);

} 
});

As the x and y properties on the Draggable object are [read-only] how can this be done to fix position with GSAP Draggable?

 

Will appreciate some help.

Cheers,

Praney

See the Pen NPVzXd by praneybehl (@praneybehl) on CodePen

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