How to start dragging with mouse, graphics object I created onInputDown?

[spinnerbox]

I am kind of lost in this events system.

I have a button which when i press it creates new graphics object. I want to be able to drag this object while the mouse button is down and when I release it this object should be destroyed.

Tried several things but I am lost in sending context objects. 

How this functionality should be done correctly? ( I remember in Flash was easy, just use startDrag() and the newly created object start to follow the mouse as you move it)

Here is my sample code which works partially:

var horizontalBaffleBtn = null,
    horzBaffle = null;

    horizontalBaffleBtn = gameObject.add.button(10, 10, frnConstr.ImageAssetKeys.HORIZONTAL_BAFFLE);
    horizontalBaffleBtn
                .events
                .onInputDown
                .add(function () {
                      this.frnPart = this
                                      .grUtils
                                      .drawRect(this.context,
                                                  gameObject.input.x, gameObject.input.y,
                                                  50, thickness,
                                                  constGr.DEFAULT_GRAPHICS_BORDER_SIZE, constGr.Colors.BLACK, 1,
                                                  utils.getHexColor(shelveCssColor), 1);
                      this.frnPart.inputEnabled = true;
                      this.frnPart.input.enableDrag(false);
                      this.frnPart.input.start(0, true);
                 },
                 {context: grContext, grUtils: this, frnPart: horzBaffle});

    console.log(horzBaffle);// prints null

    horizontalBaffleBtn.events.onInputUp.add(function () {
                                        this.destroy(); // breaks here, horzBaffle is null
                                    }, horzBaffle);

 

[spinnerbox]

Ok. this maybe can be broken in two parts:

First the horzBaffle is null because of some JavaScript rules.

And second, is this the right way to create and start dragging the object with mouse without pressing the object first?

(I press the horizontalBaffleBtn, new object is created and while the mouse is down this object follows it. When mouse button is released this object is destroyed )

[spinnerbox]

Well this was going nowhere. I decided to use update() function to update position, something like:

update: function () {
    if (utils.isTruthy(horzBaffleObj)) {
          if (gameObject.input.mousePointer.isDown) {

              horzBaffleObj.x = gameObject.input.mousePointer.x;
              horzBaffleObj.y = gameObject.input.mousePointer.y;

          } else {
              horzBaffleObj.destroy();

          }
     }
}

Still I don't get exact mouse pointer position. It is shifted a bit, by the size of the button I press on(The grey area around "the horizontal baffle" text) , haha:

 

Is there some property in Phaser.Game that contains all graphics, so that I don't create my own?

It clutters my code.

EDIT: gameObject.world but still it is shifted like the image above

EDIT: the shift comes from when creating the button. I replaced gameObject.input.x and y with x = 25 and y = 0.

Now it works

[Alexalten]

That's really interesting. Is there a demo of your code?

[spinnerbox]

The problem i had was, I tried to create new object and add multiple event listeners inside the same method. I guess that it is how JS works when you send context object to callback method. Outside of the callback method this context object is null

Anyway I found that on update() function I can detect when mouse is down and set x/y coordinates of my new rectangle object. The top code now is just creating rectangle which is then set as top level variable i.e it doesn't disappear, which means I can freely update its position.

And now I add it to gameObject.world instead of some child graphics object.

Advanced stuff, its quite confusing

The shift of x/y was because I had leftover input x/y from the previous experiment