Jump to content


issues with Draggable

Recommended Posts


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


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!


Link to comment
Share on other sites

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



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. 



  • 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", {
				bounds: "#table-wrapper",
				allowNativeTouchScrolling: true,
				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.