javascript - 在元素上拖动时无法更改光标

Question

我想将光标更改为 copy，同时将元素拖到指定的 droppable 上。 我使用它通过拖放到浏览器窗口中的方式从本地文件系统上传文件。我可以更改元素的外观，但光标不会改变。这是我正在使用的代码:

HTML

<div class="droppable"></div>

CSS

.droppable {
    width: 200px;
    height: 100px;
    background: red;
}

.droppable.active {
    background: green;
    cursor: copy;
}

JS

droppable = $('.droppable');

droppable.on('dragover dragenter', function(event) {
    droppable.addClass('active');
    event.preventDefault();
    event.stopPropagation();
});

droppable.on('dragleave', function(event) {
    droppable.removeClass('active');
    event.preventDefault();
    event.stopPropagation();
});

您可以在这里自己尝试:http://jsfiddle.net/27px4u5h/

该演示还包含第二个(橙色)元素，用于显示光标的外观。

为什么这不起作用？

Answer 1

我已经在 Chrome 和 FF 中测试了您的代码。 chrome 似乎成功运行了您的代码，但 FF 没有运行您的代码，这可能是由于某些限制或所需的支持资源，我对此不确定。

希望对您有所帮助。