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.

Doornail

I don't see disable cursor. – Mithras

@Mithras Try to drag the red square, On dragging the cursor changes its type from e-resize to disabled – Sewoll

The disabled cursor shows that you can not drop the block here. You need to define a drop zone. Look developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API – Sewoll

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>

Sewoll

Answer 2

The cursor is disabled because you do not have a drop zone specified which can receive the dragged element as Gleb already mentioned. However, it seems that this is not the behaviour you want and Gleb provided already a workable solution.

I found this question while searching for a solution to change the cursor on the drop zone.

For all the others stumbling across this post with the same question I had here is a working example:

function dragoverHandler(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
}

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

.receive {
  height: 100px;
  width: 100px;
  background: green;
}

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

<div class="receive" ondragover="dragoverHandler(event);"></div>

Knavery