issues with Draggable

[b.briel 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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!

[Fusion2222 1 Likes (Newbie)]

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;}
				}
			});

[Diaco 1,948 Likes (Superhero)]

Hi Fusion2222 

 

pls try this :

Draggable.create(".box", {
  onDragStart: function(){ 
    console.log("fired just once!"); this.vars.onDragStart = null;
  }
});

[Fusion2222 1 Likes (Newbie)]

Thanks Diaco! I forgot vars.. 

[Carl 9,066 Likes (Superhero)]

Great solution, Diaco.

 

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