Jump to content
Search Community

How to offset container bounds for Draggable

eguneys 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

I have a Draggable, it is bounded to a container like this:

  Draggable.create(t, {type:"x,y", bounds:container, throwProps:true, liveSnap: false, snap: {
    x: function(endValue) {
      return Math.round(endValue / 38) * 38;
    },
    y: function(endValue) {
      return Math.round(endValue / 50) * 50;
    }
  }});

But I want to shrink the bounds within the container. How can I give an offset to the bounded container? Another approach is to define a dummy container that fits exactly within required bounds, but that's a little more work.

Link to comment
Share on other sites

  • Solution

Hi eguneys  :)

 

for now you can try this :

function Bounds( D, bounds , left , top , offsetRight , offsetBottom ){
  var B = document.getElementById(bounds).getBoundingClientRect();
  D.applyBounds({top:top,left:left,width:B.width-offsetRight-left,height:B.height-offsetBottom-top});
};

var D = Draggable.create(".box", {
throwProps:true,
  onPress:function(){ Bounds(this,'container',20,20,100,50) }
});

Bounds(D[0],'container',20,20,100,50);

and pls check this out : 

See the Pen wBLqKE by MAW (@MAW) 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...