Drag from point which was clicked

[Ianmh]

I'm trying to figure out how to drag something from the point at which it was clicked. Even in this demo you get a popping effect.

http://pixijs.github.io/examples/#/demos/dragging.js

If you click the bunnies ear and start to drag, the cursor pops to his belly. Is there a way to drag from the point that was clicked? 

[bubamara]

the reason why bunny pops to cursor position is bunny's anchor point. You need to store offset and use it while dragging bunny

function onDragStart(event) {
    // store a reference to the data
    // the reason for this is because of multitouch
    // we want to track the movement of this particular touch
    this.data = event.data;
    this.alpha = 0.5;
    this.dragging = true;
  
     this.offX = this.x - this.data.getLocalPosition(this.parent).x;
     this.offY = this.y - this.data.getLocalPosition(this.parent).y;
}

function onDragMove() {
    if (this.dragging) {
        var newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x + this.offX;
        this.y = newPosition.y + this.offY;
    }
}

 

[ivan.popelyshev]

There were too many questions about that thing. I guess we have to modify the original example

[bubamara]

agree, examples should be more friendly to newcomers

[Ianmh]

I still couldn't get this to work the way I want. It would also be great if some of the examples could be in TypeScript. I think my issues might be around that and the 'this' context with callbacks.

[ivan.popelyshev]

Use lambdas () => {} instead of cuntions and it'll work in TS. I'm fan of TS :))))