HTML5 Drag and Drop (DnD): changing cursor

Question

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.

Sagitta

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. – Sagitta

I have the same problem. I agree with you. We may need to switch back to mousedown/mousemove events instead of H5 Dnd – Bechtel

I think you need to target the "droppable". Something like document.querySelector('.droppable').style.cursor = 'whatever' – Rochellrochella

Why dont you try the solution here https://mcmap.net/q/504943/-html5-drag-amp-drop-change-cursor-while-dragging-don-39-t-use-ui – Pathognomy

Does this answer your question? Custom cursor with drag and drop an HTML element without libraries – Programmer

#44447710 – Programmer

Answer 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.

Patmore

Answer 2

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

Aracelis

Answer 3

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.

Retina

Answer 4

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

Barvick

Answer 5

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>

Incidentally

How does that change the mouse cursor? – Sagitta