Jump to content

dragging sprite makes container move too


Recommended Posts


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);


    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();

        .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")

    function setup() {

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

        var solaire = new Sprite(loadRes.solaire.texture);
        solaire.position.set(600, 400);

        var tarkus = new Sprite(loadRes.tarkus.texture);
        tarkus.position.set(700, 400);

        var nito = new Sprite(loadRes.nito.texture);
        nito.position.set(300, 370);



    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 !

Link to comment
Share on other sites


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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...