Drag and drop cards with collisions in matter physics

[rick95]

Hi, I would like to have two cards that when they collide with each other they would rotate in an analog way of the ones you can see in the attached video.

This is the first part of the code:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
      default: "matter",
      matter: {
        gravity: { y: 0},
        debug: true
      }
    };
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
  this.load.spritesheet("controllers", "assets/sprites/controllersSheet.png", {
    frameWidth: 100,
    frameHeight: 100
  });
}
var controller = [];
function create ()
{
    this.matter.world.setBounds();
  controller[1] = this.matter.add.sprite(
    400,
    100,
    'controllers',
    0,
    null,
    { restitution: 0, friction: 1});

    controller[2] = this.matter.add.sprite(
      400,
      400,
      'controllers',
      1,
      null,
      { restitution: 0, friction: 1});

 Then I am having some issues because with this next code they move as I'd like, but they don't rotate:

    controller[1].setInteractive();
    controller[2].setInteractive();
    this.input.setDraggable(controller[1]);
    this.input.setDraggable(controller[2]);
    this.input.on("drag", (pointer, gameObject, x, y) =>
      {gameObject.setPosition(x, y);
      checkPosition();}
    );
    this.input.on("dragstart", (pointer, gameObject) =>
      {

      }
    );
    this.input.on("dragend", (pointer, gameObject) =>
      {

      }
    );

And with this other next code, they bounce all around and I can't find a way to make them stay fixed.

this.matter.add.mouseSpring({ length: 0, stiffness: 0 });

If someone knows how to help me, I would be very thankful.