問題描述

在 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模板網！