Jump to content
GreenSock

elrojo

Multiple Drag Instances

Recommended Posts

Is it possible to have multiple drag instances? Attached pen keeps failing...

var count;

for(count = 0; count < 2; count++){
  console.log(count)
  Draggable.create("box" + count, {
  bounds:"#container",
  edgeResistance:0.5,
  throwProps:true,
  lockAxis:true,
  onDrag:function() {
     TweenLite.to(document.getElementsByClassName("original" + count), 1, {x:this.x});
  },
  onThrowUpdate:function() {
    TweenLite.to(document.getElementsByClassName("original" + count), 1, {x:this.x});
  }
});
}

 

See the Pen RJoWEO?editors=1100 by anon (@anon) on CodePen

Link to comment
Share on other sites

Sure, you can have as many as you want. The problem in your example was just that you weren't targeting things correctly - you're missing a period:

//bad:
"box" + count

//good: 
".box" + count

 

(to indicate it's a class)

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

I think this is what you're trying to do:

 

See the Pen VdmeqL by PointC (@PointC) on CodePen

Does that help?

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Solid, Thanks guys!!!

Link to comment
Share on other sites

It looks like the dragging on the y axis is enabled however. Shouldn’t lockAxis prevent this?

Link to comment
Share on other sites

If you only want the x axis just use type: "x".

 

Happy tweening.

:)

 

Link to comment
Share on other sites

3 hours ago, elrojo said:

It looks like the dragging on the y axis is enabled however. Shouldn’t lockAxis prevent this?

 

Just to be clear, "lockAxis" just means that once you start dragging in a particular direction, it'll lock movement to that axis (while that drag is occurring). So if you start dragging vertically, you won't be able to drag horizontally (until you release and start dragging again). And vice-versa. 

 

Like @PointC said, if you want to only move on the horizontal axis, set type:"x". :-)

  • Like 2
Link to comment
Share on other sites

Thanks guys! I ended up running into another problem now ? 

 

 

 

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.
×