Overlapping sprites - how to find the clicked playing card?

[Alexander Farber]

Good evening,

I have several playing cards at the table (screenshot below) and am trying to identify the card which is being clicked - by the following code:

function onDragStart(ev) {
        var stagePoint = ev.data.getLocalPosition(app.stage);
        for (var i = 0; i < app.stage.children.length; i++) {
                var child = app.stage.children[i];
                if (child instanceof Card && child.getBounds().contains(stagePoint.x, stagePoint.y)) {
                        draggedCard = child;
                        if (draggedCard.getBounds().contains(stagePoint.x, stagePoint.y)) {
                                this.data = ev.data;
                                draggedCard.moveBy(-Shadow.OFFSET, -Shadow.OFFSET);
                                shadow.visible = true;
                                oldX = stagePoint.x;
                                oldY = stagePoint.y;
                        }
                }
        }
}

But the approach does not work, the sprites seem not to be sorted by the order I have called app.stage.addChild()

How to proceed here best? Please recommend some approach.

I would like to select the card for dragging and also change its z-order to be on the top.

I am using pixi.js 5.2.1, here is my web page and the screenshot below -

Thank you

Edited April 22, 2020 by Alexander Farber

[ivan.popelyshev]

bounds are AABB (parallel to X and Y) . why dont you just use regular "interactive = true" ? 

I think you have go backwards. First drawn - last clicked, isnt that right?

Also all sprites have containsPoint() method which checks if (x,y) belongs to it

Edited April 22, 2020 by ivan.popelyshev

[Alexander Farber]

Ivan, thank you for replying, but what do you mean by "bounds are AABB"?

[ivan.popelyshev]

axis-aligned bounding box.  (x1,y1,x2,y2) . Rotated elemnts has bigger AABB than their are