GWT 2.4 HTML 5 拖放 APIS - 拖动时更改光标

Posted 2023-03-04

【中文标题】GWT 2.4 HTML 5 拖放 APIS - 拖动时更改光标

【英文标题】：GWT 2.4 HTML 5 drag and drop APIS - change cursor while dragging

【发布时间】：2012-10-02 06:38:44

【问题描述】：

我正在使用 GWT 2.4 拖放 API 来拖动元素以在小部件之间传输数据。实现拖放行为很简单，但我在拖动元素时更改光标时遇到问题。 我做了一些研究，发现了一些关于如何实现这一目标的文章。

这篇文章http://blog.vjeux.com/2012/css/css-cross-browser-drag-cursor.html 建议可以通过将 cursor 属性设置为我们想要的任何可接受的值来完成。我已经尝试过 (cursor: -webkit-drag; 或 cursor: move;) 在要拖动的元素或可以放置元素但仅在右下角添加一个小图像的元素光标图标。

看了一下这个http://www.html5rocks.com/en/tutorials/dnd/basics/，据说可以通过effectAllowed和dropEffect从dataTransfer 对象。尽管 GWT 拖放 API 没有公开这些属性，但我可以通过 JSNI 设置它们，但效果与之前相同（使用 CSS）。

我发现这些问题 HTML5 Drag & Drop Change icon/cursor while dragging 和 Changing Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop) 在同一主题上，但似乎没有一个有助于在拖动时实际更改/替换图标。

感谢任何帮助。

测试环境：

Ubuntu 12.04.1 铬 22

干杯，

【参考方案1】：

我想最简单的方法是使用：

RootPanel.getBodyElement().getStyle().setCursor(Cursor.MOVE);

每当您开始移动时：

RootPanel.getBodyElement().getStyle().setCursor(Cursor.DEFAULT);

无论何时完成。

你也可以设置 CSS 属性：

cursor: whatever;

在你想要的任何元素上。你通常会这样使用它：

div.over-this-div-the-cursor-becomes-different:hover 
    cursor: move;

见：http://www.w3schools.com/cs-s-ref/pr_class_cursor.asp

【讨论】：

如果在免打扰期间设置，此 setCursor 技巧似乎不起作用

感谢您的回复噪音。我已经尝试了您的建议，但没有奏效。我已经摆弄了这篇文章***.com/questions/10119514/… 中的一个示例，但光标没有改变。我还没有弄清楚是否可以在拖动时更改光标。可能不是。我检查过的大多数示例都在拖动之前设置了光标。我必须继续挖掘，或者只是想办法解决。干杯

你好，橘子丽。抱歉，但目前看来，至少在 Firefox 中是不可能的。我刚刚发现了这个developer.mozilla.org/en-US/docs/DragDrop/… 很抱歉我的回答不便。