This one took somewhat longer than I expected. I wanted to create a collection of sprites that could be dragged around the screen as one.

Click the button to make a random rectangle appear somewhere on screen. Drag it around, then add a few more.

The rectangle (Square.js), is made up of several sprites; its body and four borders. They are contained in an extended Phaser.Group (see example). Groups have no dimensions, which means no click area, and no drag event. Therefore to get the rectangle to move as one, I enabled drag on the body and kept the borders aligned during update().

Everything inside a Group is moved relative to the Group’s position. Don’t do what I did and move the Group after the body’s been dragged as an alternative to aligning the sprites individually, because you’ll find the body has moved twice as far and your rectangle will be rectangular in name only. I found it simpler to keep all Groups at position (0,0), and position the sprites relative to that. The downside to doing it this way is that moving the Group via (group.x, group.y) = some position screws up the drag.

I think that if I were to redo this, I would forego drag altogether and use mousedown events instead, so that I could move the Group as a whole, and not the individual sprites.

Code? All available on github, and in the drag_square folder specifically.