2

例如，当您转到此页面时：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 属性控制在拖放操作期间向用户提供的拖放反馈。创建 DataTransfer 对象时，dropEffect 属性设置为字符串值。在获取时，它必须返回其当前值。设置时，如果新值是“none”、“copy”、“link”或“move”之一，则必须将属性的当前值设置为新值。其他值必须忽略。

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

4

1 回答 1

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;
  }-*/;
于 2012-10-15T22:44:52.857 回答