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

我找到了适用于 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

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;
}

资源：
- 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

***** 替代答案 *****
In Firefox and IE how can change the cursor while dragging over different targets?