Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
b.briel

issues with Draggable

Go to solution Solved by Carl,

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

Hello,

I have some issues with `Draggable` and applying its bounds:
First of all, creating an instance of Draggable will return an object, which seems pretty weird.
It means that `this.dragger` could be accessed only with this.dragger[0].

this.dragger = Draggable.create('.section', {
  dragClickables: true,
  type: "x",
  bounds: { top: 0, left: 0, width: 2000, height: 0 },
  edgeResistance: 1
});

this.dragger[0].applyBounds();

But calling `this.dragger[0].applyBounds()` will not update it; do you have any ideas why?

I'm using the Draggable plugin from the `browser` field in the package.json as the plugin doesn't work with a regular `import` or `require` from npm (see - https://github.com/greensock/GreenSock-JS/issues/117)

 

Thank you for your help!

Baptiste

Link to comment
Share on other sites

  • Solution

Hi b,

 

Yes, the create() method is specifically designed so that you can create multiple Draggables at the same time, and thus it returns an Array.

Please see docs for more info

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/create/

 

If you only need one instance, you can make a new instance using

var myDraggable = new Draggable("#someDiv", {bounds:"#someBounds"});

However, I had no problem using applyBounds() on an object using a Draggable from an Array.

 

Please look at this demo: http://codepen.io/GreenSock/pen/wKbMKm?editors=001

 

When it loads you will see that the green div has its bounds set to the red div, but if you deselect the "bounds red" checkbox it will apply bounds to the blue div.

 

If you still have problems, please fork my demo and provide a small example of applyBounds() not working. 

 

Thanks!

  • Like 4
Link to comment
Share on other sites

If may use this topic, i would like to ask another minor question about Draggable. I would like to update onDragStart function after it is fired, so it will run just once and then delete itself. I have not found any good way how to do this. Any ideas?

Draggable.create("#table-wrapper", {
				type:"x",
				bounds: "#table-wrapper",
				allowNativeTouchScrolling: true,
				zIndexBoost:false,
				onDragStart: function(){
					console.log("Dragged just once!");
					this.onDragStart = null;}
				}
			});
Link to comment
Share on other sites

Hi Fusion2222  :)

 

pls try this :

Draggable.create(".box", {
  onDragStart: function(){ 
    console.log("fired just once!"); this.vars.onDragStart = null;
  }
});
  • Like 1
Link to comment
Share on other sites

Great solution, Diaco.

 

Fusion, please create new thread for new questions in future. Thanks!

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