1

I'd like to drag-drop a container element with easeljs. By default event.stageX/stageY refers to the center of the shape or container. That means that large elements are centered at mouse position, doesn't matter, whether I grab them at the top-left or bottom-right corner.

I'd like to have the element bound to the exact mouse position.

Sorry for my bad English, it's not my mother tongue.

cassidy
  • 21
  • 3
  • 2
    Check out the DragAndDrop sample in GitHub (example here) http://createjs.com/demos/easeljs/DragAndDrop.html -- Store the mouse offset relative to the dragged item's position, and subtract it. – Lanny Feb 13 '15 at 16:14
  • 1
    Also see http://stackoverflow.com/questions/22829143/easeljs-glitchy-drag-drop/39597154#39597154. There are two ways to fix the object position relative to the mouse position, as detailed there. 1) Use regX/regY to offset the object center from the mouse. 2) Calculate/store the mouse offset relative to the dragged item's position and subtract it, as suggested by Lanny above. – Pim Schaaf Oct 12 '16 at 07:22

1 Answers1

4

Maybe it's too late but hope this helps.

container.on('mousedown', function(e){
        var posX = e.stageX;
        var posY = e.stageY;
        this.offset = {x: this.x - posX, y: this.y - posY};
}
container.on('pressmove', function(e){
    var posX = e.stageX;
    var posY = e.stageY;
    this.x = posX + this.offset.x;
    this.y = posY + this.offset.y;
}
Lanny
  • 11,244
  • 1
  • 22
  • 30
Wenceslao Negrete
  • 556
  • 4
  • 14