JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js"></script>

JavaScript

var renderer= new PIXI.WebGLRenderer(640, 480);
document.body.appendChild(renderer.view);
var stage= new PIXI.Container(),
    rb= new PIXI.Graphics(),
    oc= new PIXI.Container(),
    sub= [], dragging= false, oPos= {y:0},
    g1= new PIXI.Graphics(),
    g2= new PIXI.Graphics();

sub[0]= new PIXI.Container();
sub[0].position.y= 0;
sub[1]= new PIXI.Container();
sub[1].position.y= 100;

rb.beginFill(0);
rb.drawRect(0,0, 640,480); // rect backing to catch mouse clicks
rb.interactive= true;
rb.on('mousedown', function(e) {
    dragging= true;
    oPos.y= e.data.global.y;
});
rb.on('mousemove', function(e) {
    if (dragging) {
        dy= e.data.global.y-oPos.y;
        oPos.y= e.data.global.y;
        oc.position.y+= dy;
    }
});
rb.on('mouseup', function(e) {
    dragging= false;
      // attempting to catch a misfire
    console.log('checking...');
    if (sub[0].children[0].containsPoint({x:e.data.global.x,y:e.data.global.y}))
        console.log('in blue!');
});

g1.beginFill(0x000077);
g1.drawRect(0,0, 100,100);

g2.beginFill(0x773300);
g2.drawRect(0,0, 100,100);

sub[0].addChild(g1);
sub[1].addChild(g2);

oc.addChild(sub[0]);
oc.addChild(sub[1]);

stage.addChild(rb);
stage.addChild(oc);
update();

function update() {
    renderer.render(stage);
    requestAnimationFrame(update);
}