HTML5 Drag and Drop (DnD): changing cursor

19
votes

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.

4
htmldrag-and-dropcursor
Did you ever find a solution to this? – Mahks
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
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
I think you need to target the "droppable". Something like document.querySelector('.droppable').style.cursor = 'whatever' – idan
Why dont you try the solution here stackoverflow.com/a/27811047/3513687 – anusreemn

4 Answers

0
votes

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

0
votes

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>
0
votes

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.

0
votes

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