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

Question

我正在使用 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/ ，据说通过从 dataTransfer 对象设置 effectAllowed 和 dropEffect 拖放时可以改变光标(效果)。尽管 GWT Drag and Drop 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 Chrome 22

干杯，

Answer 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/cssref/pr_class_cursor.asp