Search the Community

I am creating a Rectangle and Adding it to the ViewPort with Code: var rectangle = new Graphics(); rectangle.beginFill(0, 0.001); rectangle.lineStyle(1, 0xFF0000); rectangle.drawRect(5, 5, 200, 100); rectangle.interactive = true; rectangle.buttonMode = true; rectangle.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveRectangle); app.viewport.addChild(rectangle); after that I am creating a Sprite using the code and adding it to the rectangle. ( Its basically a handle to increase the width of Rectangle ) const textureMove = PIXI.Texture.from(horizontalMoveSVG); const sprite = new PIXI.Sprite(textureMove); sprite.interactive = true; sprite.buttonMode = true; sprite.width = 25; sprite.height = 25; sprite.anchor.set(0.5); sprite.x = 205; sprite.y = 50; sprite.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveSprite); rectangle.addChild(sprite); rectangle.endFill(); the two functions are below: function onDragMoveRectangle() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.x = newPosition.x; this.x = newPosition.y; } } function onDragMoveSprite() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.width = newPosition.x; this.height = newPosition.y; } } Problem I am facing is: If I move Rectangle or a Sprite, both the drag functions got executed, which I don't want. I want to execute only 1 function when rectangle move and other function when the sprite moves. - onDragMoveRectangle will move the rectangle ( changing the position ) - onDragMoveSprite will increase the width and height of the rectangle