HTML5拖放（DnD）：更改光标 [英] HTML5 Drag and Drop (DnD): changing cursor

问题描述

在HTML5中的浏览器客户区域拖动元素时，如何将光标更改为我想要的任何光标？

到目前为止，我只有在拖动时可以显示默认光标（除了不支持抛出任何光标之外的任何光标）。

我不是在说下列任何一种： p>

• 使用 event.dataTransfer.setDragImage（）显示除光标




• 使用 event.dataTransfer.dropEffect 可以显示除光标之外的副本或链接符号，或者使用 event.dataTransfer.mozCursor 在Firefox中将光标更改为无符号




• 因为这只能执行默认的系统行为，或显示箭头光标，这两者都不会有帮助（此外，我希望跨浏览器支持，尽管我主要针对Chrome）

我尝试了许多其他的技巧，包括使用CSS ：hover 和：focus 和许多JavaSscript技巧都无济于事。

感谢任何帮助。

解决方案

所以你想在拖动元素时更改光标？

  $（'YourElement'）。draggable（{
 cursor：crosshair
}）; 
  

请参阅 http://api.jqueryui.com/draggable/#option-cursor 了解更多信息

While dragging an element over the browser client area in HTML5, how can I change the cursor to any cursor that I want?

So far, I've only been able to display the default cursor while dragging (except for the none cursor wherever dropping is not supported).

I'm not talking about any of the following:

• using event.dataTransfer.setDragImage() to display an image besides the cursor

• using event.dataTransfer.dropEffect to display a copy or a link symbol besides the cursor, or to change the cursor to the none symbol

• in Firefox, using event.dataTransfer.mozCursor, since that can only perform the default system behavior, or display the arrow cursor, neither of which helps (besides, I want cross browser support, though I'm primarily targeting Chrome)

I've tried many other tricks, including using CSS :hover and :focus, and many JavaSscript tricks, all to no avail.

Thanks for any help.

解决方案

So you want to change your cursor while dragging an element?

$('YourElement').draggable({
     cursor: "crosshair"
});

see http://api.jqueryui.com/draggable/#option-cursor for more info

这篇关于HTML5拖放（DnD）：更改光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！