Arcanoid pad. Add mobile support

Hello, I building arcanoid game this is my first game.

interface Props {
    scene: Phaser.Scene,
    x: number,
    y: number
}

export default class Pad extends Phaser.Physics.Arcade.Image {
    velocity: number;

    constructor(props: Props) {
        console.log('pad load');
        const {scene, x, y} = props;
        super(scene, x, y, Images.Pad);
        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.setImmovable();
        this.velocity = 600;
    }

    moveLeft(x: number = this.velocity) {
        this.setVelocity(-x, 0);
    }

    moveRight(x: number = this.velocity) {
        this.setVelocity(x, 0);
    }

    setPadVelocity(x: number = this.velocity) {
        if (x >= 0) {
            this.velocity = x;
        }
    }

    stop() {
        this.body.stop();
    }

    applyBuff(buff: BuffPad) {
        switch (buff.data.values.type) {
            case BuffType.reducePad:
                this.setDisplaySize(this.body.width / 2, this.body.height);
                break;
            case BuffType.increasePad:
                this.setDisplaySize(this.body.width * 1.3, this.body.height);
                break;
        }
    }
}

Now i scene i use:

this.pad = new Pad({scene: this, x, y});
this.cursors = this.input.keyboard.createCursorKeys();

in update


        //move pad
        if (this.cursors.left.isDown) {
            this.pad.moveLeft()
        } else if (this.cursors.right.isDown) {
            this.pad.moveRight()
        } else if (this.cursors.down.isDown) {
            this.pad.stop()
        }

Now how can i set this element as dragable or add mobile support user clicks ? Any suggestions ?

You can make it draggable (see examples) and modify its velocity instead of position.

Or add virtual keys for mobile.