Efficient drag and drop ?

[B.Guyl]

Hi !

I started with Phaser3 this weekend, I wanted to make a card game.
I'm struggling with the lack of documentation.

My current way to make a draggable object is to track the position of the `pointermove` event.

export class Card extends Phaser.GameObjects.Sprite {
  constructor (scene: Phaser.Scene, x: number, y: number, frame?: string) {
    super(scene, x, y, 'card', frame)
    this.setInteractive()
    this.on('pointerdown', () => this.dragOn())
    this.on('pointerup', () => this.dragOff())
  }

  private dragOn (): void {
    this.addListener('pointermove', (e: any) => {
      this.x = e.event.x
      this.y = e.event.y
    })
  }

  private dragOff (): void {
    this.removeAllListeners('pointermove')
  }
}

But I have an issue when I move my mouse too fast.
Is there a good way of doing this ?

Also, bonus question: Is there a list of available events ?

[samme]

http://labs.phaser.io/index.html?dir=input/dragging/&q=

[B.Guyl]

Thank's !

Now my code look like this:

export class Card extends Phaser.GameObjects.Sprite {
  constructor (scene: Phaser.Scene, x: number, y: number, frame?: string) {
    super(scene, x, y, 'cards', 'back')
    this.setInteractive()
    scene.input.setDraggable(this)
    scene.input.on('drag', (pointer: any, gameObject: Card, dragX: number, dragY: number) => {
      gameObject.x = dragX
      gameObject.y = dragY
    })
  }
}

I probably should move the event listener on the scene level.

Is this working better because the `drag` event fire more events thant `pointermove` ?

 

[eddieone]

We need to make the examples google-able ?

[iom]

What about when you need to drag-n-drop an entire scene, (e.g. a map for panning), not an individual object?

[Damini]

How to check drag_object1_Id with dropped_object2_Id?