Cursor of HTML element gets set after, but not during dragging

Question

My cursor gets set only after the drag has completed. I'm not sure why this doesn't work. I've also experimented with setTimeout(fn, 0). The border gets set correctly, but this cursor's effect is seen only after the drag ends. Help is appreciated. Why does cursor not work, while border work correctly? How can I fix this issue? It doesn't work in IE, Chrome and Firefox.

http://jsfiddle.net/t6u3kp9z/1

<div draggable="true" id="x">
    Some text.
</div>

var x = document.getElementById("x");
x.ondragstart = function(e) {    
    e.target.style.cursor="move";
}

x.ondragenter = function(e) {
    e.target.style.border = "solid";
    e.target.style.cursor="move";
}

x.ondragleave = function(e) {
    e.target.style.border = "none";
    e.target.style.cursor="move";
}

score 0 · Accepted Answer · answered Feb 16 '15 at 21:15

I have found an answer which works on Google Chrome.

var divs = Array.prototype.slice.call(document.getElementsByTagName("div"));
divs.forEach(function (x) {
    x.draggable = "true";
    x.style.border = "solid";
    x.ondragstart = function (e) {
        e.dataTransfer.effectAllowed = 'move'
        e.dataTransfer.dropEffect = 'move';
    };

    x.ondragleave = function (e) {
        e.dataTransfer.dropEffect = 'move';
        e.stopPropagation();
        e.preventDefault();
    };

    x.ondragenter = x.ondragover = function (e) {
        var effect = (" " + x.className + " ").indexOf(" allowed ") > -1 ? "move" :
            "none";
        console.log(effect);
        e.dataTransfer.dropEffect = effect;
        e.stopPropagation();
        e.preventDefault();
    };
});

http://jsfiddle.net/e6bbrsc3/1

score -1 · Answer 2 · edited May 23 '17 at 10:24

This is fairly limited, but in your ondragover event you can add the dropEffect based on the element you are over (or in this case, set a different ondragover event per element). Here is a CodePen ... for some reason this code didn't work on jsFiddle.

JAVASCRIPT:

function allowDrop(ev) {
    ev.dataTransfer.dropEffect = 'copy'
    ev.preventDefault();
}
function allowDrop2(ev) {
    ev.dataTransfer.dropEffect = 'link'
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
}

HTML:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

<p id="drag1" draggable="true" ondragstart="drag(event)">This is a draggable paragraph. Drag this element into the rectangle.</p>

</div>
<br />
<br />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop2(event)"></div>

CSS:

#div1, #div2 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}

resources:
- Changing Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop)
- Controlling the appearance of the HTML5 drag and drop effect
- http://www.w3schools.com/tags/att_global_draggable.asp

***** ALTERNATIVE ANSWER *****
In Firefox and IE how can change the cursor while dragging over different targets?

Thank you for your response. My goal is to actually figure out how to set the cursor dynamically based on some logic in javascript. For example, I will compare the ids of the element I'm dragging and the element I'm hovering on, and on basis of that I'd set the cursor. I had just simplified the use case to illustrate that I'm unable to set the cursor while dragging in Javascript. — ssh, Feb 09 '15 at 22:19
This does what you need: http://stackoverflow.com/questions/24000954/in-firefox-and-ie-how-can-change-the-cursor-while-dragging-over-different-target — deebs, Feb 10 '15 at 15:04
I've already seen that solution and been through the resources you've posted. I can't use jQuery or use a non-standard cursor. I'm more interested in finding out what's wrong with my code and fixing it. Or have an alternate simple solution to achieve the normal cursor. — ssh, Feb 10 '15 at 15:53

Cursor of HTML element gets set after, but not during dragging

2 Answers2