Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Praney Behl

Draggable item in Parent with Zoom - position fix?

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

Hi Praney Behl :)

 

CSS ZOOM is a non-standard property !

 

anyway , pls check this out : 

See the Pen zxQyxq by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks @Diaco, that looks easy peazy!

 

Cheers appreciate it mate. :)

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