How to make object movable only by the player?

Question

I'm trying to let the player of my PhaserJS game (with MatterJS physics) move a (static?) object around. That is: the player is allowed to move the object, but otherwise it should be static to the world of MatterJS. Here's a minimal scenario reproducing my situation:

class MyScene extends Phaser.Scene {
  create() {
    this.matter.add.rectangle(60, 120, 100, 10).isStatic = true;
    this.matter.add.pointerConstraint({ /* solve it here?! */ });
  }
  
  dropBall() {
    this.matter.add.circle(150, 20, 10);
  }
}

const game = new Phaser.Game({
  banner: false,
  width: 300,
  height: 150,
  physics: {
    default: 'matter',
    matter: { debug: true, setBounds: true },
  },
  scene: [MyScene]
});

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("start").addEventListener("click", () => {
    game.scene.getScenes(false)[0]?.dropBall();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div>1. Move platform to middle. 2. Then <button id="start">Drop a ball!</button></div>

I want the player to only be able to move the static rectangle around with the mouse. Technically the ball-dropping feature in my example is not needed for the question, but I'd hope it gives some context. Plus it shows that the pointerConstraint does something because you now can move the balls around (which shouldn't be possible).

Answer 1

If you want to use the builtin phaser functions, you just need to create a phaser-matter-gameboject, like an image (link to the documentation), and that you configer it to be draggable.

1. create matter-image
2. make image interactive setInteractive
3. make image draggable this.input.setDraggable(...)
4. in the drag Event update the position of the image

Here a short demo, showcasing this:
(based on your codesnippet)

class MyScene extends Phaser.Scene {
  create() {
    // START - just creating an image for the demo  
    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff);
    graphics.fillRect(0, 0, 100, 10);
    graphics.generateTexture('paddle', 100, 10);
    // END - just creating an image for the demo  

    let paddle = this.matter.add.image(60, 120, 'paddle').setStatic(true);
    
    paddle.setInteractive();
    this.input.setDraggable(paddle);

    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
        paddle.x = dragX;
        paddle.y = dragY;
    });
  }
  
  dropBall() {
    this.matter.add.circle(150, 20, 10);
  }
}

const game = new Phaser.Game({
  banner: false,
  width: 300,
  height: 150,
  physics: {
    default: 'matter',
    matter: { debug: true, setBounds: true },
  },
  scene: [MyScene]
});

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("start").addEventListener("click", () => {
    game.scene.getScenes(false)[0]?.dropBall();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div>1. Move platform to middle. 2. Then <button id="start">Drop a ball!</button></div>