JSFiddle - React, Tailwind, and code Playground

JavaScript

window.onload = function() {

        var game = new Phaser.Game(600, 800, Phaser.AUTO, '', { preload: preload, create: create, update: update });

		var ball;
				
        function preload () {
			game.stage.backgroundColor = '#fff4d9';
			
			game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
			game.scale.setScreenSize();
		
            game.load.image('ball', 'ball.png');
        }

		
        function create () {
			game.physics.startSystem(Phaser.Physics.P2JS);
       	    ball = game.add.sprite(50, 50, 'ball');
        	game.physics.enable([ball], Phaser.Physics.P2JS);
        	game.physics.p2.gravity.y = -100;
        	
        	ball.inputEnabled = true;
        	ball.input.enableDrag(true);

			ball.events.onDragStart.add(startDrag, this);
			ball.events.onDragStop.add(stopDrag, this);
        }
				
		function startDrag() {
			//  You can't have a sprite being moved by physics AND input, so we disable the physics while being dragged
			ball.body.moves = false;
			console.log('startdrag');
		}

		function stopDrag() {
			//  And re-enable it upon release
			ball.body.moves = true;
			console.log('stopdrag');
		}
		
		function update(){
			if( ball.input.isDragged ){
				//BODY => follow pointer
				if( ball.body != null ){
					ball.body.x = game.input.activePointer.worldX;
					ball.body.y = game.input.activePointer.worldY;
				}
			}
		}
    };