Making a group draggable

[krk_gamer]

Hi All,

I am trying develop a game that contains a color band of 5 different colored rectangles. So I created a group and added those rectangles to it(I have uploaded the image of the output). Now I am trying to write the code in such a way that the entire group will be moving horizontally once I drag it. But from what I found we can make the individual element in the group draggable but not the entire group. Anyways, I did write the code this way but I think its wrong as its not working. Here it is.

var leftRectGroup = game.add.group();
var colorarray = ["0x607D8B", "0xFF5722", "0xFFEB3B", "0x9E9E9E", "0x795548"];

for(var i = 0; i < 5; i++){
  var rectanglegraphics = game.add.graphics(0,0);
  rectanglegraphics.beginFill(colorarray, 1);
  rectanglegraphics.drawRect(0, i*256, 100, 256);
  leftRectGroup.add(rectanglegraphics);
  rectanglegraphics.endFill();
}

leftRectGroup.inputEnabled = true;
leftRectGroup.input.enableDrag();
leftRectGroup.input.allowHorizontalDrag = false;

Can anyone please provide me the right snippet to make the entire group draggable at once.

Thanks in Advance.

[Zeterain]

Groups don't have input handlers, so they can't be dragged directly.

I'm not sure what the end goal of the game is, but if the entire bar will always be dragged as one image, then you could use a single bitmapData object and draw the rectangles onto that. You can then make a sprite using the bitmapData as the texture, and enable drag on that single sprite.

You could also enable drag on each rectangle, and in the update-loop update the positions of the rectangles so that they remain positioned relative to each other. This would create the illusion of them being a single draggable body. This option is more expensive, however, and should be done if you know you need to keep the rectangles separated.

[krk_gamer]

Ok Thank You. I might have to try the second alternative.