在 Firefox 和 IE 中，如何在拖动不同目标时更改光标?
在 HTML5 中进行拖放，我需要能够根据放置目标更改光标.在 Chrome 中，这通过更改 dropEffect 来工作，
Doing drag and drop in HTML5, I need to be able to change the cursor depending upon the drop target. In Chrome this works by changing the dropEffect,
if (e.currentTarget.id == 'dropMove') {
e.originalEvent.dataTransfer.dropEffect = 'move';
} else {
e.originalEvent.dataTransfer.dropEffect = 'link';
}
但是在 IE 和 Firefox 中更改 dropEffect 对光标没有影响.请参阅以下小提琴:
however changing the dropEffect in IE and Firefox has no effect on the cursor. See the following Fiddle:
http://jsfiddle.net/ksoncan34/s7kN5/
我尝试过手动设置光标，使用 window.cursor，但这也没有效果.如何更改 Firefox 和 IE 中不同放置目标的光标?
I've tried manually setting the cursor, with window.cursor, but this also has no effect. How can I change the cursor for different drop targets in Firefox and IE?
推荐答案
我建议使用 jQuery ui -- droppable and draggable.
I'd suggest using jQuery ui -- droppable and draggable.
您可以使用 cursor: none 隐藏默认/实际光标，并使用风格化的 DOM 元素来呈现您自己的光标"元素.
You can hide the default/actual cursor using cursor: none and use a stylized DOM element to render your own 'cursor' element.
我在这里提供了一个示例:http://jsfiddle.net/lawrencealan/WMyu7/78/ (更新2017 年 6 月 8 日)
I've provided an example here: http://jsfiddle.net/lawrencealan/WMyu7/78/ (updated 6/8/2017)
注意:mousemove 在拖动可拖动"属性元素时停止触发.
Note: mousemove stops firing during dragging of "draggable" attributed elements.
--
截至 2019 年 9 月，该示例现已失效.
As of September 2019, the example is now broken.
相关文章