JSFiddle - React, Tailwind, and code Playground

CSS

body { padding: 0; overflow: hidden; }

JavaScript

var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;
var is_dragging = false;

var stage = new PIXI.Container();

var renderer = PIXI.autoDetectRenderer( viewWidth, viewHeight, { backgroundColor: 0x000000, antialias: true } );



window.requestAnimFrame = ( function() {
	return  window.requestAnimationFrame  ||
	window.webkitRequestAnimationFrame		||
	window.mozRequestAnimationFrame    		||
	function( callback ) {
		window.setTimeout(callback, 1000 / 60);
	};
})();



document.body.appendChild( renderer.view );



function animate() {
	requestAnimFrame( animate );
	renderer.render( stage );
}



function mouseDown( event ) {

	console.log( "mouseDown" );

	this.data = event.data;
	this.alpha = 0.8;
	this.dragging = true;
	is_dragging = true;

}



function mouseUp( event ) {

	console.log( "mouseUp" );

	this.data = null;
	this.alpha = 1;
	this.dragging = false;
	is_dragging = false;

}



function mouseMove( event ) {

	mouse_pos = event.data.global;

	console.log( "mouseMove" );


	if ( this.dragging ) {

		// console.log( event.target );

		// need to get parent coords
		// var newPosition = this.data.getLocalPosition( this.parent );
		var newPosition = this.data.global;

		this.position.x = newPosition.x;
		this.position.y = newPosition.y;

		console.log( "circle.position:" );
		console.log( circle.position );

	}

}




circle = new PIXI.Graphics();

circle.interactive = true;
circle.buttonMode = true;

circle
			.on( "mousedown" , mouseDown )
			.on( "mouseup" , mouseUp )
			.on( "mousemove", mouseMove );


circle.beginFill( 0xff00ff );



// The offset dragging happens when the position of the circle is set before it's added to the stage
circle.drawCircle( 150, 100, 50 ); // OFFSET DRAGGING ISSUE

// To see the dragging offset go away: Comment out the above line, and uncomment the line below and also uncomment the circle.position line after stage.addChild
// circle.drawCircle( 0, 0, 50 ); // dragging works fine when circle drawn at...