Changing dropEffect cursor to 'move' on drag

Question

I'd like to change my cursor to 'move' when using HTML 5 browser drag and drop. However, when I move the draggable item, this cursor remains unchanged (default). According to MDN documentation and other various Stackoverflow posts with this same question, the dataTransfer object can be set to move. However, when setting this property, the cursor remains unchanged.

  function dragstart_handler(ev) {
    // Add the target element's id to the data transfer object
    ev.dataTransfer.setData("application/my-app", ev.target.id);
    ev.dataTransfer.effectAllowed = "move";
  }
  function dragover_handler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
  }
  function drop_handler(ev) {
    ev.preventDefault();
    const data = ev.dataTransfer.getData("application/my-app");
    ev.target.appendChild(document.getElementById(data));
  }

.drop-zone {
  width: 300px;
  height: 200px;
  border: solid 1px red;
}

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">
  This element is draggable.
</p>
<div
  id="target"
  class="drop-zone"
  ondrop="drop_handler(event)"
  ondragover="dragover_handler(event)">
  Drop Zone
</div>

Answer 1

You can set the cursor to move when the element is being dragged, add this line to your dragstart_handler function:

ev.dataTransfer.setData("text/plain", ev.target.style.cursor = "move");

This line of code is setting the data type as text/plain and assigning the ev.target.style.cursor property to "move". This sets the cursor to the "move" mode when the element associated with the event (ev) is dragged.

It is necessary to set the data type to text/plain because the dataTransfer object only accepts data of type plain text. Setting the data type to plain text ensures that the data is correctly formatted and can be transferred successfully.

It's also worth noting that different browsers have different levels of support for HTML5 drag and drop. Some browsers may support the basic functionality, while others may support more advanced features such as dragging and dropping multiple elements at once.

Additionally, browsers may have different implementations for drag and drop operations, such as how the drag and drop operation is initiated or how the data is transferred.

More info in the MDN docs:

function dragstart_handler(ev) {
  // Add the target element's id to the data transfer object
  ev.dataTransfer.setData("application/my-app", ev.target.id);
  // Set the cursor to move when the element is being dragged
  ev.dataTransfer.setData("text/plain", ev.target.style.cursor = "move"); // Add this line of code
}

function dragover_handler(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}

function drop_handler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("application/my-app");
  ev.target.appendChild(document.getElementById(data));
}

.drop-zone {
  width: 300px;
  height: 200px;
  border: solid 1px red;
  cursor: move;
}

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">
  This element is draggable.
</p>
<div id="target" class="drop-zone" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">
  Drop Zone
</div>