Drag and drop cursor changes in safari and chrome while dragging

Question

I have set up a drag and drop scenario in the jsFiddle : Drag N Drop cursors

<div class="dragMe" draggable="true">Drag Me</div>
<div class="dragHere">Drag Here</div>

CSS:

.dragMe {
  height: 50px;
  width : 50px;
  background-color: Green;
  cursor: grab;
  cursor: -webkit-grab;
}
.dragMe:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.dragHere {
    height: 150px;
    width : 150px;
    background-color: Red;
}

JS:

$(document).ready(function () {
    $(".dragMe").on("dragstart", function (event) {
        var dataTransferObj = event.originalEvent.dataTransfer;
        dataTransferObj.effectAllowed = "move";
        dataTransferObj.setData('Text', $(this).attr('id'));
    });
    $(".dragHere").on("dragover drop", function (event) {
        event.preventDefault();
        if (event.type === 'dragover') {
            event.originalEvent.dataTransfer.dropEffect = 'move';
        }
    });
});

To start with, both browsers show the grab cursor that changes to grabbing when active. But in chrome and safari as soon as the drag starts, the cursor changes back to a pointer.

I want to preserve the grabbing hand cursor until drag ends. The images are not great quality but you can see the behavior, I'm talking about.

Firefox behavior:

Safari & Chrome behavior:

I have tried changing the cursor css property of the element on the drag events, but that has no effect whatsoever. Does anyone know why this is happening?

Sfen Sfen · Accepted Answer · 2017-11-24T08:35:37

Try setting user-select: none on the .dragHere div

If that doesn't work: chrome sets cursor to text while dragging, why?

or: Safari. Wrong cursor when dragging

Drag and drop cursor changes in safari and chrome while dragging

1 Answers