Correct Syntax for implementing Drag and Drop via classes

Phaser 3
1

I try to get the Example for Drag correctly into a game.
The example is seen here:Phaser 3 Drag

in the example a variable is used. i want to use classes instead and i am not sure how to get there. i tried it like this:

create() {
    console.log("message");
    
      this.basket = this.add.image(200, 250, 'basket').setInteractive();
      this.basket.scaleX=.5;
      this.basket.scaleY=.5;

      this.basket.setDraggable('basket');

      //  The pointer has to move 16 pixels before it's considered as a drag
      this.basket.dragDistanceThreshold = 16;

      this.basket.on('dragstart', function (pointer, gameObject) {

         gameObject.setTint(0xff0000);

     });

      this.basket.on('drag', function (pointer, gameObject, dragX, dragY) {

         gameObject.x = dragX;
        // gameObject.y = dragY;

     });

      this.basket.on('dragend', function (pointer, gameObject) {

         gameObject.clearTint();

     });

As you can see i want to drag an image called basket and move it around on the x axes. My first guess was, this is only possible with a sprite. My second guess is that my syntax is wrong.
Possibly both.

2

this.basket.setDraggable('basket'); is not correct. Try one of the following:

Enable dragging 

gameObject.setInteractive({ draggable: true });
  • Enable dragging and add it to dragging detecting list after registered interactive
scene.input.setDraggable(gameObject);
  • Enable dragging
gameObject.input.draggable = true;
1 Like
3

now i have it like this and it works:

this.basket = this.add.image(200, 650, 'basket').setInteractive();
      this.basket.scaleX=.5;
      this.basket.scaleY=.5;
      this.input.setDraggable(this.basket);