HTML元素的光标是在拖动之后设置的，但不是在拖动过程中设置的

Question

只有在拖动完成后，我的光标才会被设置。我不知道为什么这不起作用。我还试用了setTimeout（fn，0）。边框设置正确，但只有在拖动结束后才能看到光标的效果。感谢您的帮助。为什么光标不工作，而边框工作正常？如何解决此问题？它不适用于IE、Chrome和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";
}

Answer 1

我找到了一个在谷歌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

Answer 2

这是相当有限的，但在ondragover事件中，您可以根据所覆盖的元素添加dropEffect（或者在这种情况下，为每个元素设置不同的ondragover活动）。这是一个CodePen。。。由于某种原因，这段代码在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;
}

资源：
-更改HTML5拖放文件的鼠标光标（GMail拖放）
-控制HTML5拖放效果的外观
-http://www.w3schools.com/tags/att_global_draggable.asp

*****备选答案*****
在Firefox和IE中，如何在拖动不同目标时更改光标？