EaselJS: glitchy drag/drop

Question

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?

olsn · Accepted Answer · 2016-06-23T09:05:33.517

6

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

edited Jun 23 '16 at 09:05

answered Apr 03 '14 at 11:46

olsn

16,644
6
59
65

Sweet thanks! Any clues about the cursor going into text-edit mode? – Mossi Apr 04 '14 at 02:30
Thanks for the quick fix! Any ideas why this happens in the first place? I'm guessing because the framework is still a WIP? Also why isn't this stuff documented on the Easel website? I took their exact script and the end result was my question above. – Mossi Apr 04 '14 at 07:45
1

The change of the cursor depends often on the browser. The default behaviour of most browsers is that if you hold down the mouse and move it, the browser expects you to select something to copy it(-> therefor the text-selection cursor). Some browsers don't distinguish between a pressmove on a canvas or text. EaselJS doesn't do this by default, because it cannot know what you need for your project. Also the `con.cursor = ...` solution needs more performance and trade-offs like that should be decided by the developer. – olsn Apr 04 '14 at 12:36

score 5 · Answer 2 · edited May 23 '17 at 10:29

Though the solution provided by @olsn most certainly works, using the regX/regY to offset the object to account for the current mouse position might lead to difficulties when subsequently transforming the object.

E.g. if you want to rotate the object around its center, you will want to have the regX/regY reset to object width/2 and object height/2. This will reintroduce the glitch, though at a later stage in your object manipulation.

Given scenarios like this, I like to prevent using regX/regY to prevent dragging glitches.

Alternatively, I take note of the mouse position on dragstart, and measure the mouse movement while dragging. By applying this movement to the objects x/y position, the object will appear to move with the mouse, simulating dragging.

As shown in this fiddle and in the following code:

function enableDrag(obj) {
  obj.on("mousedown", dragstart);
  obj.on("pressmove", drag);
};

function dragstart(evt) {
  dragging = false;
}

function drag(evt) {
    // register object starting point and mousedrag (stage) starting point
  if (!dragging || !dragging.startCoords || !dragging.stageCoords) {
    dragging = evt.currentTarget;
    dragging.startCoords = {x: dragging.x, y: dragging.y};
    dragging.stageCoords = {x: evt.stageX, y: evt.stageY};
  }

  // calculate mouse offset after move, relative to starting point, subtract this movement from object coords (move)
  dragging.stageMove = {x: dragging.stageCoords.x - evt.stageX, y: dragging.stageCoords.y - evt.stageY};
  dragging.objectMove = {x: dragging.startCoords.x - dragging.stageMove.x, y: dragging.startCoords.y - dragging.stageMove.y};

  // apply movement to object
  evt.currentTarget.x = dragging.objectMove.x;
  evt.currentTarget.y = dragging.objectMove.y;

  stage.update(); //update stage without passing through ticker for higher FPS
}

This worked for VERY WELL me.... – Prisoner ZERO Dec 27 '22 at 12:58 — Prisoner ZERO, Dec 27 '22 at 12:58

score 1 · Answer 3 · answered Dec 12 '16 at 09:24

my solution

(function(t, n) {
        layer.addEventListener('mousedown', function(evt) {
            var offset = {
                    x: t.x - evt.stageX,
                    y: t.y - evt.stageY
                }

        t.addEventListener("pressmove", function(e2){

                        t.x =  offset.x + e2.stageX;
                        t.y =  offset.y + e2.stageY;
                        app.stage.update();

        })



    });


     })(layer, i);

where layer is the layer, and i is not used.

EaselJS: glitchy drag/drop

3 Answers3

Linked