As you can see most of the code is comments. There are only about 23 lines of code without the notes.<\/p>\n

class DragBox extends Phaser.Group {\r\n    constructor(dragObj) {\r\n        super(game);\r\n        this.dragObj = dragObj;\r\n        game.input.onDown.add(this.onDown, this);\r\n    }\r\n    onDown() {\r\n        this.canDrag = false;\r\n        if (game.input.y > this.dragObj.y && game.input.y < (this.dragObj.y + this.dragObj.height)) {\r\n            this.canDrag = true;\r\n            this.startY = this.dragObj.y;\r\n            this.offSet = this.dragObj.y - game.input.y;\r\n        }\r\n    }\r\n    update() {\r\n        if (game.input.mousePointer.isDown) {\r\n            if (this.canDrag == true) {\r\n                var diff = game.input.y - this.startY + this.offSet;\r\n                this.dragObj.y = this.startY + diff;\r\n            }\r\n        }\r\n    }\r\n}<\/pre>\n
The Easy way<\/h2>\n
All you need to do to drag a group yourself is to copy the code class directly above and include it in your project.<\/p>\n
Then use this code to implement just after you create your object.<\/p>\n
var dragBox = new DragBox(objectYouWantToDrag);<\/pre>\n
That’s it!<\/p>\n
This will only allow you to drag the object vertically but the code can be adapted to allow for horizontal was well.<\/p>\n
Here is an example I of what I am doing:<\/p>\n
First I made a grid class that simply extends a Phaser group. This grid class is for child elements of the same size. It takes a parameter\u00a0of ‘cols’ for the number of columns.<\/p>\n
class Grid extends Phaser.Group {\r\n    constructor(cols) {\r\n        super(game);\r\n        this.cols = cols;\r\n    }\r\n    arrange() {\r\n        var xx = 0;\r\n        var yy = 0;\r\n        this.children.forEach(function(item) {\r\n            \/\/place the item on a column with a 10 percent buffer\r\n            item.x = item.width * xx * 1.1;\r\n            \/\/place the item on a row with a 10 percent buffer\r\n            item.y = item.height * yy * 1.1;\r\n            xx++;\r\n            if (xx ==this.cols) {\r\n                xx = 0;\r\n                yy++;\r\n            }\r\n        }.bind(this));\r\n    }\r\n    center() {\r\n        this.x = game.width \/ 2-this.width\/2;\r\n        this.y = game.height \/ 2-this.height\/2;\r\n    }\r\n}<\/pre>\n
For the thumbnails, I am using a class called Box. This is simply a class that is extending group that contains an image with a mouse listener attached.<\/p>\n
class Box extends Phaser.Group\r\n{\r\n\tconstructor()\r\n\t{\r\n\t\tsuper(game);\r\n\t\tvar thumb=this.create(0,0,\"box\");\r\n\t\tthumb.anchor.set(0.5,0.5);\r\n\t\tthumb.inputEnabled=true;\r\n\t\tthumb.events.onInputDown.add(this.clicked);\r\n\t}\r\n\tclicked()\r\n\t{\r\n\t\tconsole.log(\"click\");\r\n\t}\r\n}<\/pre>\n
And this is my stateMain.js code<\/p>\n
var StateMain = {\r\n    preload: function() {\r\n        game.load.image(\"box\", \"images\/box.png\");\r\n    },\r\n    create: function() {\r\n        \/\/make a grid \r\n        \/\/\r\n        this.grid = new Grid(5);\r\n        \/\/make 30 boxes and add to the grid\r\n        \/\/\r\n        for (var i = 0; i < 30; i++) {\r\n            var box = new Box();\r\n            this.grid.add(box);\r\n        }\r\n        \/\/arrange the child objects into a grid\r\n        \/\/\r\n        this.grid.arrange();\r\n        \/\/center on stage\r\n        \/\/\r\n        this.grid.center();\r\n        \/\/make a dragBox and pass the grid to it\r\n        \/\/\r\n        var dragBox = new DragBox(this.grid);\r\n    }\r\n}<\/pre>\n
And here is the drag groups code in action. If you open the dev console, you can also see that the squares are still clickable. To make sure squares are not accidentally\u00a0clicked during drag I am going to implement a function that checks the time between mouse down and mouse up. If it is quick then it will be a click otherwise, I assume the user is dragging.<\/p>\n\n\n