HTML 元素的光标在之后设置，但在拖动期间不设置

Posted 2023-05-08

【中文标题】HTML 元素的光标在之后设置，但在拖动期间不设置

【英文标题】：Cursor of HTML element gets set after, but not during dragging

【发布时间】：2015-04-09 19:27:58

【问题描述】：

我的光标只有在拖动完成后才会设置。我不确定为什么这不起作用。我也尝试过 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";

【参考方案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

【参考方案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?

【讨论】：

感谢您的回复。我的目标是真正弄清楚如何根据javascript中的一些逻辑动态设置光标。例如，我将比较我正在拖动的元素和我悬停的元素的 id，并在此基础上设置光标。我刚刚简化了用例来说明在 Javascript 中拖动时我无法设置光标。

这可以满足您的需求：***.com/questions/24000954/…

我已经看到了该解决方案并浏览了您发布的资源。我不能使用 jQuery 或使用非标准光标。我更感兴趣的是找出我的代码有什么问题并修复它。或者有一个替代的简单解决方案来实现普通光标。