CSS cursor when dragging

Question

I have a div like so, but when I drag on this div, the cursor automatically changes to the disabled one. How can I fix this?

div {
  background-color: red;
  width: 10px;
  height: 10px;
  cursor: e-resize;
}

<div draggable="true"></div>

The div must include the draggable attribute as I need it for other usage.

Answer 1

1. What's happening

The draggable attribute indicates

whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.

When an element is made draggable using this attribute, the API and the browser control the appearance of the cursor during the drag:

cursor	meaning
disabled	you can't drop the block here
copy	dragged block will be copied to the drop zone
move	dragged block will be moved to the drop zone

and so on. With drag effects you can define what will happen to the block after it has been dropped, and the cursor will change its appearance over the drop zone to suggest the user what fate awaits the dragged block.

You can also define the drag image, but that means not changing the cursor, but turning the dragged block itself into an image :)

In this demo the second block changes to the website logo after a couple of seconds of dragging. And the cursor for both draggable blocks changes over the drop zone as the API and browser see fit.

function imageOnDragging(event) {
  let img = new Image();
  img.src = "https://stackoverflow.com/favicon.ico";
  event.dataTransfer.setDragImage(img, 10, 10);
}

.demo {
  color: white;
  font: 15px Helvetica, sans-serif;
  margin-bottom: 10px;
  padding: 10px;
  width: 80px;
  height: 80px;
}

.drag-me {
  background-color: #369;
}

.drop-zone {
  background: #69c;
  float: right;
  width: 200px;
  height: 200px;
}

<div class="demo drop-zone" ondragover="event.preventDefault()">Drop zone</div>
<div class="demo drag-me" draggable="true">Drag me</div>
<div class="demo drag-me" draggable="true" ondragstart="imageOnDragging(event)">Image on dragging</div>

2. What can be done

You can use the Draggable interaction from the jQuery UI to bypass the attribute, simplify your work, and be able to control the cursor with CSS.

Add the :active pseudo-class to stylize the block's dragging state.

This demo uses CSS for grab and grabbing cursor from Ben Kalsky's CodePen. You can drag and drop the block wherever you want.

https://codepen.io/glebkema/pen/YzEyxxb

$(function() {
  $(".draggable-by-jquery-ui").draggable();
});

.demo {
  color: white;
  font: 15px Helvetica, sans-serif;
  padding: 10px;
  width: 80px;
  height: 80px;
}

.drag-me.draggable-by-jquery-ui {
  background-color: #f60;
}

.draggable-by-jquery-ui {
  cursor: url("https://www.google.com/intl/en_ALL/mapfiles/openhand.cur"), all-scroll;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.draggable-by-jquery-ui:active {
  cursor: url("https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur"), all-scroll;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

<div class="demo drag-me draggable-by-jquery-ui">Drag me wherever you want</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

3. If the draggable attribute is obligatory

As far as I can see, jQuery UI allows you to style the cursor even if the block has the draggable attribute:

$(function() {
  $("[draggable=true]").draggable();
});

[draggable=true] {
  cursor: e-resize;
}

.demo {
  background-color: #f60;
  color: white;
  font: 15px Helvetica, sans-serif;
  padding: 10px;
  width: 80px;
  height: 80px;
}

<div class="demo" draggable="true">Fix the attribute</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>