Bunny drag example with correct mouse offset

[dirkk0]

Hi,

 

disclaimer: pixi newb here.

 

I am working on an isometric example and as such want to be able to drag the background to move the scene.

Starting from the bunny example (#8) I noticed a behavior that isn't desirable for my particular case. Once you click on the bunny, the sprite jumps to center at your mouse cursor. It's barely noticeable because the bunnies are rather small, but once you tried this with larger sprites, it is pretty obvious:

http://jsfiddle.net/dirkk0/3B2DY/

 

I am not sure if this is the most elegant solutions (comments welcome) but the way I solved this was to introduce to new local variables in mousedown...

this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;

...and to change the position with this offset in mousemove.

this.position.x = newPosition.x - this.sx;this.position.y = newPosition.y - this.sy;

Working example here:

http://jsfiddle.net/dirkk0/cXfpq/

 

Best,

  Dirk

[globHammer]

The icon dragging action felt very natural to me.

Thank you for sharing.

[bramchi]

Thanks a million for your post, Dirk. 
I managed to get it working too :-)

If anyone is interested, here is a working version for the current PixiJS 4.6.2:

 

[ivan.popelyshev]

@bramchi

Projection example is better at dragging than that:) http://pixijs.io/examples/#/projection/basic.js

[Baggio_bug18]

Actually only 3 lines of code need to be changed in original example (http://pixijs.io/examples/#/demos/dragging.js) :

function onDragMove(e) {//here
    if (this.dragging) {
        var newPosition = this.data.getLocalPosition(this.parent);
        this.x += e.data.originalEvent.movementX;//here
        this.y += e.data.originalEvent.movementY;//and here
    }
}