Is there any way to change the cursor style when dragging DOM element?

Question

I have a draggable = true DOM element, and I want to change the default cursor style when dragging this element.

Here are some codes:

function dragstart(e){
    element.style.cursor = 'move';
}

element.addEventListener('dragstart', dragstart, false);

Please Note: Not just like custom cursor with image using css.

Is there any way to make it?

What do you want the cursor to look like? Is it a custom image or existing one ? — Sooraj, Feb 24 '16 at 05:38
Possible duplicate of [Custom Cursor Image CSS](http://stackoverflow.com/questions/336925/custom-cursor-image-css) — , Feb 24 '16 at 05:43
Do you have an event that fires when the element is dragged ? — Sooraj, Feb 24 '16 at 05:47
@SoorajChandran Yes, actually I did try to capture drag event and change the cursor style via css: `cursor: move`, but I was failed in this way. — L_K, Feb 24 '16 at 05:53
used jquery css function to change the cursor inside the event ? Please post some code so that i can take a look. — Sooraj, Feb 24 '16 at 05:55

Sooraj · Answer 1 · 2016-02-24T06:13:41.927

0

use e.target

function dragstart(e){
     e.target.style.cursor = "move";
    }

Try using jQuery

function dragstart(e){
 $(this).css("cursor","move");
}

edited Feb 24 '16 at 06:13

answered Feb 24 '16 at 06:03

Sooraj

9,717
9
64
99

2

That doesn't make any sense at all. `e` is an instance of a MouseEvent object. `style` would be undefined in that context. Did you perhaps mean something along the lines of `e.target` or similar? – Joseph Marikle Feb 24 '16 at 06:11
Yes, I added jQuery in my project. – L_K Feb 24 '16 at 06:18
Did you check if the event is getting called ? – Sooraj Feb 24 '16 at 06:18
Yes, I added `console.log('drag event')` in `dragstart` function, and Chrome did log this message. I think Chrome just doesn't support change the cursor style when drag DOM element via `html5` native drag event. – L_K Feb 24 '16 at 06:21
4

I can't get it to work either. It's not really the fault of the code either. I have a suspicion that there's some weird shadow DOM stuff going on. I tried setting the element's stlye: http://output.jsbin.com/notihesowe. I also tried setting the root element's style *and* including `*{cursor:inherit !important}`: http://output.jsbin.com/xizujohuxu/. just to see if it created a targetable shadow DOM element, but nothing is working. – Joseph Marikle Feb 24 '16 at 06:23
Working on it. Will come back soon. – Sooraj Feb 24 '16 at 06:32
I guess you might have already found this fiddle - http://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon-cursor-while-dragging . Even that is not working. – Sooraj Feb 24 '16 at 06:40
I find a method that looks like can change cursor style: [mozCursor](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/mozCursor), but only support Firefox on Windows. – L_K Feb 24 '16 at 06:42

Is there any way to change the cursor style when dragging DOM element?

1 Answers1