28

While dragging an element over the browser client area in HTML5, how can I change the cursor to any cursor that I want?

So far, I've only been able to display the default cursor while dragging (except for the none cursor wherever dropping is not supported).

I'm not talking about any of the following:

  • using event.dataTransfer.setDragImage() to display an image besides the cursor

  • using event.dataTransfer.dropEffect to display a copy or a link symbol besides the cursor, or to change the cursor to the none symbol

  • in Firefox, using event.dataTransfer.mozCursor, since that can only perform the default system behavior, or display the arrow cursor, neither of which helps (besides, I want cross browser support, though I'm primarily targeting Chrome)

I've tried many other tricks, including using CSS :hover and :focus, and many JavaSscript tricks, all to no avail.

Thanks for any help.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
XDR
  • 4,070
  • 3
  • 30
  • 54
  • 1
    I do not think that it is possible to change the cursor when using html 5 drag & drop (instead of just normal mouse moves). I think that it is for security, to ensure that the web page doesn't try to trick a user into thinking that dropping in an area will behave other than expected. I just switched to using normal mouse moves instead of drag and drop. – XDR Sep 29 '14 at 13:44
  • I have the same problem. I agree with you. We may need to switch back to mousedown/mousemove events instead of H5 Dnd – Ricky Jiao Apr 01 '16 at 15:16
  • I think you need to target the "droppable". Something like `document.querySelector('.droppable').style.cursor = 'whatever'` – idan Aug 05 '16 at 07:31
  • 1
    Why dont you try the solution here http://stackoverflow.com/a/27811047/3513687 – anusreemn Mar 16 '17 at 07:50
  • 1
    Does this answer your question? [Custom cursor with drag and drop an HTML element without libraries](https://stackoverflow.com/questions/44447210/custom-cursor-with-drag-and-drop-an-html-element-without-libraries) – Thatkookooguy Jun 02 '21 at 21:39
  • https://stackoverflow.com/questions/44447210/custom-cursor-with-drag-and-drop-an-html-element-without-libraries/44611187 – Thatkookooguy Jun 02 '21 at 21:39

5 Answers5

1

Here is a CSS only solution!

element:hover:active {
cursor: type;
}

Just put the element selector where element is and specify a cursor. This is a bit of a hack, because it does not detect dragging, only hover and click at the same time.

awholegnuworld
  • 381
  • 1
  • 12
0

you can change it with css

#buttonId:hover {
    cursor: value;
}

you can find multiple cursor values here: https://www.w3schools.com/cssref/pr_class_cursor.asp

Mhmd Az
  • 82
  • 9
rijrz
  • 61
  • 7
0

For this you can use CSS as followed:

#buttonID:hover:active {
cursor: *cursor-type*;
}

There are several cursor types you can use, which are:

help; - will display the default cursor with a little question mark on the side

wait; - will display the default loading cursor animation of your OS

crosshair; - will give you a crosshair cursor

not-allowed; - will display a icon for your cursor

zoom-in; - will display a magnifier with a plus inside

grab; - will display a hand, this one will suit your needs the best I think.

These are all cursor: properties I know of. You might find some of the useful.

T3C
  • 9
  • 3
-1

So you want to change your cursor while dragging an element?

$('YourElement').draggable({
     cursor: "crosshair"
});

see http://api.jqueryui.com/draggable/#option-cursor for more info

Hans. M.
  • 73
  • 3
-1

Hi Try this out by Making an element draggable requires adding the given code

<script>
function dragstart_handler(ev) {
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("text/plain", ev.target.id);
}

window.addEventListener('DOMContentLoaded', () => {
// Get the element by id
const element = document.getElementById("p1");
// Add the ondragstart event listener
element.addEventListener("dragstart", dragstart_handler);
});
</script>

<p id="p1" draggable="true">This element is draggable.</p>
Suhas Sumukh
  • 1
  • 3