在Firefox和IE中，如何在拖动不同的目标时更改光标？ [英] In Firefox and IE how can change the cursor while dragging over different targets?

问题描述

在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中的dropEffect并且Firefox对游标没有影响。见下面的小提琴：

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并可拖动。

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/ （更新6/8/2017）

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.

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