Multiple Drag Instances

[elrojo]

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

[GreenSock]

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? 

[PointC]

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

 

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

Does that help?

 

Happy tweening.

 

[elrojo]

Solid, Thanks guys!!!

[elrojo]

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

[PointC]

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

 

Happy tweening.

 

[GreenSock]

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

[elrojo]

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