Cursor becomes default on drag

[dustinfarris]

trafficstars

I am trying to style the cursor, e.g.:

.card:hover {
  cursor: -webkit-grab;
}
.card:active {
  cursor: -webkit-grabbing;
}

This works until I start moving the card—then the cursor resets to default for some reason. I'm not sure why this is and/or if it is a bug.

[dgavey]

I'm not sure why it would be doing this either. We don't apply any styling to the cursor in the code currently. I'll have to look into further soon,

[dustinfarris]

Ok, great. Thanks for making this addon—it's really helpful.

[priyam]

Hi, I'm running into the same issue with cursor style not being applied when start moving the object - it shows the default pointer. Any update on whether you got a chance to look into this?

[dustinfarris]

I still have not figured this out.

On Aug 1, 2016, at 2:46 PM, Priyam Chawla [email protected] wrote:

Hi, I'm running into the same issue with cursor style not being applied when start moving the object - it shows the default pointer. Any update on whether you got a chance to look into this?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mharris717/ember-drag-drop/issues/24#issuecomment-236670429, or mute the thread https://github.com/notifications/unsubscribe-auth/ABCWvSQAaA0sRj9xsEFw8Vcgh6X48bCmks5qbj8hgaJpZM4HCtd_.

Dustin Farris

[sandstrom]

I think this may be a limitation with browsers rather than this plugin.

Possibly setting a .dragging class on the body when dragging starts, and removing when finished + body.dragging { cursor: -webkit-grabbing; } may work.

[s0rthak]

I'm facing the same issue with webkit based browsers. On Firefox, the first time I drag, the cursor return to default type. But from the second time onwards it works fine on Firefox.

I'm simply overriding the draggable-object class as described in the documentation.

This is my CSS:

.draggable-node {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: -webkit-grab;
    cursor: grab;
}

.draggable-node:active {
    border-left: 5px solid $pond;
    cursor: move;
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

The border-left property stays attached throughout the drag-drop event though.

[bendycode]

Running into this issue also. @batraman's work around isn't working for us. Looks like we may need to use another drag & drop library until this is fixed.

[sandstrom]

@bendycode have you tried my suggestion? (above)

[bendycode]

@sandstrom: Tried it just now, without success.

[iand675]

I think I figured out what the problem is here. effectAllowed gets set as part of dragStart in the drag coordinator, which seems to only allow the cursor to look normal unless overridden. I wonder if there's actually a good reason to set it like that. Seems like it should be a configurable parameter for the component.

https://github.com/mharris717/ember-drag-drop/blob/master/addon/services/drag-coordinator.js#L33

[lacek]

I think this may be a limitation with browsers rather than this plugin.

Possibly setting a .dragging class on the body when dragging starts, and removing when finished + body.dragging { cursor: -webkit-grabbing; } may work.

Run in to the same problem. Tried adding a dragging class as suggested but has 2 issues:

1. There is always a moment of glitch of move cursor when the drag starts
2. The cursor sometimes (around 50% of time) reset to normal cursor while dragging