在 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.

这篇关于在 Firefox 和 IE 中，如何在拖动不同目标时更改光标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！