GWT DND 更改 DataTransfer 图像或光标答案

【问题标题】：GWT DND changing DataTransfer image or cursorGWT DND 更改 DataTransfer 图像或光标
【发布时间】：2012-10-15 22:06:57
【问题描述】：

例如，当您转到此页面：http://grooveshark.com/#!/search?q=stackoverflow 然后开始拖动任何歌曲时，您会得到这种不错的拖放行为：

然后，在拖放过程中，当您将鼠标悬停在接受拖放的区域时，光标下的图像会更改以显示可以拖放：

有没有机会让这种事情与GWT一起工作？

我为一些文本制作了一个虚拟小部件，在拖动开始后更改 DragImage 似乎不起作用。我也试过改变光标，但没有成功

@Override
        public void onDragOver(DragOverEvent event) {
            dragIndicator.setInnerText("CAN DROP !");
            event.getDataTransfer().setDragImage(dragIndicator,
                    10, 10);
        }

拥有拖放功能很好，但正如我在这里看到的http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html#BinExample 我们只能修改悬停元素。 我错了吗？

编辑

在阅读 W3C (http://dev.w3.org/html5/spec/dnd.html#the-drag-data-store) 后，我遇到了这个问题：

dropEffect 属性控制拖放反馈在拖放操作期间给出用户。当数据传输创建对象后，dropEffect 属性设置为字符串值。在获取时，它必须返回其当前值。在设置时，如果新值为“无”、“复制”、“链接”或“移动”之一，则属性的当前值必须设置为新值。其他值必须忽略。

但是，我在 GWT 代码中没有找到类似的东西，也许我会使用 JSNI 尝试它（必须检查它是否是标准）

【问题讨论】：

标签： javascript gwt drag-and-drop

【解决方案1】：

好的，我已经设法在悬停期间使用 JSNI 更改了光标（仅在 FF 15 中测试）。 这远非完整和正确。

public class MonWidget extends Widget implements HasAllDragAndDropHandlers {

private DivElement mainDiv;

public MonWidget()
{
    mainDiv = Document.get().createDivElement();

    SpanElement span1 = Document.get().createSpanElement();
    span1.setInnerText("span1");
    span1.setDraggable(Element.DRAGGABLE_TRUE);
    span1.getStyle().setBackgroundColor("red");

    SpanElement span2 = Document.get().createSpanElement();
    span2.setInnerText("span2");
    span2.setDraggable(Element.DRAGGABLE_TRUE);
    span2.getStyle().setBackgroundColor("blue");    

    mainDiv.appendChild(span1);
    mainDiv.appendChild(span2);

    setElement(mainDiv);

    this.addDragStartHandler(new DragStartHandler() {
        public void onDragStart(DragStartEvent event) {

            Element element = Element.as(event.getNativeEvent().getEventTarget());
            event.setData("text", "some data");
            event.getDataTransfer().setDragImage(element,
                    10, 10);        
        }
    });

    this.addDragOverHandler(new DragOverHandler() {

        @Override
        public void onDragOver(DragOverEvent event) {
            setEffet(event.getNativeEvent(),"copy");
            //setEffet(event.getNativeEvent(),"link");
            // THIS do not seems to work - setEffet(event.getNativeEvent(),"move");
            event.stopPropagation();
        }
    });
}
....

还有JSNI方法：

public final native void setEffet(NativeEvent e, String effect) /*-{
     var dt = e.dataTransfer;
     dt.dropEffect = effect;
  }-*/;

【讨论】：