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 onDragStart(event) {
	console.log( "onDragStart" );

	this.data = event.data;
	this.start_data = {x: event.data.originalEvent.screenX, y: event.data.originalEvent.screenY};
	this.dragPos = this.data.getLocalPosition(this.parent);
	// this.oldPosition = this.position.clone();
	this.oldPosition = this.position;
	this.alpha = 0.8;
	this.dragging = true;
}


function onDragEnd(event) {
	console.log( "onDragEnd" );

	var ev_data = event.data.originalEvent;
	//if real dragend
	if (this.start_data) {
		if (Math.abs(this.start_data.x - ev_data.screenX) > 2 || Math.abs(this.start_data.y - ev_data.screenY) > 2)
			event.stopPropagation();
	}
	this.dragging = false;
	this.alpha = 1;
	// set the interaction data to null
	this.data = null;
}


function onDragMove(event) {
	console.log( "onDragMove" );

	if (this.dragging) {
		var newPosition = this.data.getLocalPosition(this.parent);
		var pv = this.position, pv2 = this.oldPosition;
		pv.x = (newPosition.x - this.dragPos.x);
		pv.y = (newPosition.y - this.dragPos.y);

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


circle = new PIXI.Graphics();

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

circle.beginFill( 0xff00ff );
circle.drawCircle( 150, 100, 50 );
circle.endFill();

circle
			.on( "mousedown" , onDragStart )
			.on( "mouseup" , onDragEnd )
			.on(...