Jump to content
Search Community

Draggable bounds

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

 

I'm struggling to get the bounds setting right using draggable.

 

I have an image that is 5100 x 3560 and I have it inside a div that takes up the viewport.

 

I want to be able to drag the image around x and y until the top edge is level with the top of the viewport, bottom is level with the bottom etc. 

 

Using an element as the bounds will let the images bottom edge go all the way to the top of the view port - not what I need.

 

I have gotten close with:

 

var iw = 5100;
var ih = 3560;
var vw = $('#scroll').outerWidth();
var vh = $('#scroll').outerHeight();

Draggable.create("#test", {
	type:"x,y",
	bounds:{top: -(ih-vh), left: -(iw-vw), width: 5100, height: 3560}
});

 

That seems to work perfectly horizontally but vertically, it barely moves.

 

If I remove the height: 3560 from the above, the image can be dragged up the right distance so it's bottom edge is inline with the bottom of the viewport but I can drag it down way past the top edge being inline with the top of the viewport.

 

Feels like I missing something simple?

 

I did have this working fine with scrollLeft and scrollRight using movemove but touch screen devices didn't work at all.. so greensock to the rescue.

 

 

 

Link to comment
Share on other sites

Sigh, always figure it out after posting...

 

I got it to work with top: 0 and height: vh (viewport height).

 

I don't fully understand why that works yet but there it is.

 

So it's not a total waste, code that seems to work:

 

var $container = $('#scroll');
var iw = 5100;
var ih = 3560;
var vw = $container.outerWidth();
var vh = $container.outerHeight();

Draggable.create("#test", {
    type:"x,y",
    bounds:{
        top: 0,
        left: -(iw-vw),
        width: iw,
        height: vh
    }
});

// Centre it in the viewport to start
var start_x = -(iw - vw) / 2;
var start_y = -(ih - vh) / 2;

TweenLite.set("#test", {x: start_x, y: start_y});

 

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