CSS for Grabbing Cursors (Drag & Drop)

CSS for grabbing cursors (drag & drop)

I think move would probably be the closest standard cursor value for what you're doing:

move

Indicates something is to be moved.

Custom cursor with drag and drop an HTML element without libraries

It seems that browsers don't allow changing the cursor at the beginning of a drag & drop operation. I don't know why but it's a known issue, I believe they will in the future.

If jQuery is not an option, a possible way around is to implement a drag & drop from scratch, using mouse events and cloning the source element:

var onDragStart = function (event) {  event.preventDefault();  var clone = event.target.cloneNode(true);  clone.classList.add("dragging");  event.target.parentNode.appendChild(clone);  var style = getComputedStyle(clone);  clone.drag = {    x: (event.pageX||(event.clientX+document.body.scrollLeft)) - clone.offsetLeft + parseInt(style.marginLeft),    y: (event.pageY||(event.clientY+document.body.scrollTop)) - clone.offsetTop + parseInt(style.marginTop),    source: event.target  };};
var onDragMove = function (event) {  if (!event.target.drag) {return;}  event.target.style.left = ((event.pageX||(event.clientX+document.body.scrollLeft)) - event.target.drag.x) + "px";  event.target.style.top = ((event.pageY||(event.clientY+document.body.scrollTop)) - event.target.drag.y) + "px";};
var onDragEnd = function (event) {  if (!event.target.drag) {return;}  // Define persist true to let the source persist and drop the target, otherwise persist the target.  var persist = true;  if (persist || event.out) {    event.target.parentNode.removeChild(event.target);  } else {    event.target.parentNode.removeChild(event.target.drag.source);  }  event.target.classList.remove("dragging");  event.target.drag = null;};
var onDragOver = function (event) {  event.preventDefault();};

.dropzone {  width: 500px;  height: 200px;  background-color: silver;}
.block {  position: absolute;  background-color: pink;  margin: 10px;  border: 20px solid pink;}
.draggable {  position: absolute;  cursor: pointer; /* IE */  cursor: -webkit-grab;  cursor: grab;}
.dragging {  cursor: -webkit-grabbing;  cursor: grabbing;  background-color: red;}

<div class="dropzone" onmouseover="onDragOver(event);">  Grab and drag block around  <div class    = "draggable block"    onmousedown = "onDragStart(event);"    onmousemove = "onDragMove(event);"    onmouseup   = "onDragEnd(event);"    onmouseout  = "event.out = true; onDragEnd(event);"  >    I'm draggable  </div></div>

How can I change the cursor when dragging? Material CDK Drag and Drop

Just add cursor: grabbing to your example-box:active

.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
  cursor: grabbing;
}

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.

Additional information here

https://www.w3schools.com/cssref/sel_active.asp

Stackblitz

https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css

Drag and drop cursor changes in safari and chrome while dragging

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

CSS for Grabbing Cursors (Drag & Drop)