dragging sprite makes container move too

[djo]

hi

I'm beginning to write a new app, where I need to include a background plan, and several markers onto it.
I'm still learning, since it's been 2 days that I'm struggling to write something clean.

but it would seem that if a container is draggable, and if its sprites are draggable too, when you try to drag a sprite child it brings the container to move at the same time.

is there a way to detect that if you're above a sprite, you're not really above the container itself ?

in fact, in this case, there's a container with a background sprite, which has a child container containing smaller sprites.
I need to be able to move the sprites independentely on the background, and the background too. but when I move the background, the sprites need to move alongside with the background.

const App = PIXI.Application,
        Container = PIXI.Container,
        pContainer = PIXI.particles.ParticleContainer,
        loader = PIXI.loader,
        loadRes = PIXI.loader.resources,
        Sprite = PIXI.Sprite;


    var app = new App(window.innerWidth, 700);

    document.body.appendChild(app.view);

    var dragLayer = new PIXI.DisplayGroup(99, false);

    var backContainer = new Container();
    var allyContainer = new Container();
    var enemyContainer = new Container();

    app.stage.displayList = new PIXI.DisplayList();

    loader
        .add("back", "/Content/Images/plan.jpg")
        .add("nito", "/Content/Images/nito.png")
        .add("solaire", "/Content/Images/allySolaire.png")
        .add("onion", "/Content/Images/allyOnion.png")
        .add("tarkus", "/Content/Images/allyTarkus.png")
        .load(setup)


    function setup() {

        var backg = new Sprite(loadRes.back.texture);
        backContainer.addChild(backg);
        backg.position.set(0, 0);
        backg.anchor.set(0);
        subscribe(backContainer)


        var solaire = new Sprite(loadRes.solaire.texture);
        allyContainer.addChild(solaire);
        solaire.position.set(600, 400);
        solaire.anchor.set(0.5);
        solaire.scale.set(1.2)
        subscribe(solaire)

        var tarkus = new Sprite(loadRes.tarkus.texture);
        allyContainer.addChild(tarkus);
        tarkus.position.set(700, 400);
        tarkus.anchor.set(0.5);
        tarkus.scale.set(1.2)
        subscribe(tarkus)

        var nito = new Sprite(loadRes.nito.texture);
        enemyContainer.addChild(nito);
        nito.position.set(300, 370);
        nito.anchor.set(0.5);
        subscribe(nito)


        app.stage.addChild(backContainer);
        allyContainer.setParent(backContainer)
        enemyContainer.setParent(backContainer)
        
    }

    


    function subscribe(obj) {
        obj.interactive = true;
        obj.on('pointerdown', onDragStart)
           .on('pointerup', onDragEnd)
           .on('pointermove', onDragMove);
    }

    function onDragStart(event) {
        if (!this.dragging) {
            this.data = event.data;
            this.oldGroup = this.displayGroup;
            this.displayGroup = dragLayer;
            this.dragging = true;
            this.alpha = 0.5;
            this.dragPoint = event.data.getLocalPosition(this.parent);
            this.dragPoint.x -= this.x;
            this.dragPoint.y -= this.y;
        }
    }

    function onDragEnd() {
        if (this.dragging) {
            this.dragging = false;
            this.displayGroup = this.oldGroup;
            this.alpha = 1;
            this.data = null;
        }
    }

    function onDragMove() {
        if (this.dragging) {
            var newPosition = this.data.getLocalPosition(this.parent);
            this.x = newPosition.x - this.dragPoint.x;
            this.y = newPosition.y - this.dragPoint.y;
        }
    }

 

thanks !

[Taz]

It looks like this bug was fixed: https://github.com/pixijs/pixi.js/pull/3877

Maybe try updating to current pixi version if not already?

[djo]

hey

i've first tried your first answer, but it didn't really work.

I'm checking the link you gave me, but it send to interactionManager.js... do I have to install this one ? I only use pixi.js and pixi-display.js for now...

[Taz]

Yeah my "quick fix" got hairy and prob needed trial and error and more complications to work;) , but then I remembered reading about interaction fixes in one of the recent change logs..

That last link was for the developer's fix info - if it's still not working on the latest version, you can comment on the GitHub issue for it here I think: https://github.com/pixijs/pixi.js/issues/3851

[djo]

I'm running 4.4.4, I'll try the lastest one later.

but I guess my coding needs a lots of optimization, I'm probably even using the basics wrong.

 

I'm at the beginning of my app development, so I've not yet thought this through, I'll certainly change my mind on certain features, I'm just seeing how to do basic stuff to merge everything in the near future.

thank you for your time, I'll check this out pretty quick.