Drag and drop with complex polygons

[Ianmh]

Hi, I'm new to Pixi.js and the forums. 

I'm trying to figure out how to drag complex shapes made of polygons. I used PhysicsEditor to create the Polygons. I know a hitbox can be assigned to a sprite, but this seems to only work for a single simple polygon?

So my next approach was to create a bunch of graphics shapes from the polygons and add them to a container. This works, but I don't know if it's the proper way to do it. Here is the code below. 

let polygons = new Polygons().getPolygons();
let container = new PIXI.Container();

polygons.forEach((data: any) => {
    var graphic = new PIXI.Graphics();
    graphic.beginFill(0x00dd00, 1);
    graphic.drawPolygon(data.shape);
    graphic.endFill();
    graphic.scale.x = scale;
    graphic.scale.y = scale;
    graphic.interactive = true;
    graphic.buttonMode = true;
    graphic.alpha = 0;
    container.addChild(graphic);

    graphic
        .on('pointerdown', this.onDragStart)
        .on('pointerup', this.onDragEnd)
        .on('pointerupoutside', this.onDragEnd)
        .on('pointermove', this.onDragMove);
    });

    container.addChild(sprite);
    container.x = event.data.global.x - container.width / 2;
    container.y = event.data.global.y - container.height / 2;
        
    this.app.stage.addChild(container);

}

My mouse up creates the sprite by clicking on the screen. This is my Drag function.

onDragMove = (event: any): void => {

    if (this.dragging) {
        console.log(event.currentTarget)
        event.currentTarget.parent.alpha = .5;
        let newPosition = event.data.global;
        let parent = event.currentTarget.parent;
        parent.x = newPosition.x - parent.width / 2;
        parent.y = newPosition.y - parent.height / 2;
        this.wasDragging = true;
    }
}

The weird thing with this code is that all my sprites jump on top of each other while dragging. If I use this exact same code for my onDragEnd function and comment out the onDragMove it works as expected, but obviously I can't see the drag happening.

So my question is, is this the proper way to do this? If it is, why is the drag function not working? Is there a better way to do this?

[ivan.popelyshev]

Not related to dragging:

Please use "width" and "height" only after you study how exactly those properties work: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L570 , they use getLocalBounds() and mess up transforms.

As for dragging, I had the code but I lost it again. Always forget to put that one in examples  The idea is to not use center: determine coords of the mouse relative to dragging element and use it when you re-position it.