Manually invoking sprite drag after hold

[iamhaas]

Hey so I'm trying to replicate some list items using Phaser that is able to be scrolled by touch. These list items are represented by sprites and are in a container group and are shown in a grid.

 

I'm have trouble with being able to scroll this list because the sprites in it are able to be dragged in order to rearrange their order. Scrolling is problematic because when I try to drag the list I am invoking the drag of the individual sprite and therefore can't move the list.

 

I had a solution that I would appreciate some help to implement. I realize that Phaser has an onHold event for the input. I would like to have the sprite starting to drag after it's listener is called on. I'm thinking that in order to manually invoke the drag after the set period I would use something like sprite.input.startDrag but I haven't been able to use it correctly. 

 

Any help would be greatly appreciated.

 

Mike

[rich]

If you've got overlapping Sprites that all detect input, then they will consider themselves equal and start fighting over who gets dragged or not. The winner being the one at the top of the display list. You can use the priorityID to control this however. Hopefully this example should explain:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });function preload() {    game.load.image('manga', 'assets/pics/manga-girl.png');    game.load.image('disk', 'assets/sprites/copy-that-floppy.png');    game.load.image('card', 'assets/sprites/mana_card.png');}function create() {    game.stage.backgroundColor = '#4b0049';    //  Note the input.priorityID values below.    //  Even though the card and disk sprites visually appear on-top of the manga sprite,    //  because they have lower priorityIDs the manga sprite gets priority in all input events.    //  Without the priorityID, input priority is given to the sprite at the top of the display list    //  (in this case to card).    var manga = game.add.sprite(100, 100, 'manga');    manga.inputEnabled = true;    manga.input.enableDrag();    manga.input.priorityID = 2;    var disk = game.add.sprite(200, 200, 'disk');    disk.inputEnabled = true;    disk.input.enableDrag();    disk.input.priorityID = 1;    var card = game.add.sprite(300, 300, 'card');    card.inputEnabled = true;    card.input.enableDrag();    card.input.priorityID = 0;}function render() {    game.debug.text("Drag the Sprites", 32, 32);}