bitmapdrag-and-dropeaseljs

EaselJS: glitchy drag/drop


I have a bitmap inside of a container. When I drag the container the cursor changes to the edit-text shape, and also the image jumps to the bottom-right side of the cursor (as though I'm holding the image from the top-left corner and dragging it).

Here's my code just so you can see that I've RTFM:

function createIcon(imgPath) {
    var image = new Image();
    image.onload = function () {
        var img = new createjs.Bitmap(event.target)

        var con = new createjs.Container();
        con.x = 160;
        con.y = 100;
        con.addChild(img);
        stage.addChild(con);

        con.on("pressmove", function(evt) {
            evt.currentTarget.x = evt.stageX;
            evt.currentTarget.y = evt.stageY;
            stage.update();
        });

        stage.update();
    }

    image.src = imgPath;
}

Any ideas what's wrong?


Solution

  • To prevent the jumping you would have to add an additional step before the pressmove:

    con.on('mousedown', function(evt) {
        var ct = evt.currentTarget,
            local = ct.globalToLocal(evt.stageX, evt.stageY),
            nx = ct.regX - local.x,
            ny = ct.regY - local.y;
        //set the new regX/Y
        ct.regX = local.x;
        ct.regY = local.y;
        //adjust the real-position, otherwise the new regX/Y would cause a jump
        ct.x -= nx;
        ct.y -= ny;
    });
    

    This will set the new regX/Y to the current's mouse-position to prevent the shape/image from jumping.

    For the cursor: You could either set this via CSS:

    canvas {
        cursor: default !important; /* in this case you couldn't set any other cursor via EaselJS though */
    }
    

    OR you can set this via EaselJS: http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#property_cursor

    con.cursor = "default"; //or 'pointer'...or whatever cursor you want it to be
    // you have to activate enableMouseOver though on the stage for this to work