Question

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

Drag started

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

Drag Over

有没有机会让这种事情与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属性设置为字符串值。在获取时，它必须返回其当前值。在设置，如果新的值是“无”，“复制”，“链接”或“移动”之一，然后是属性的当前值必须设置为新值。其他价值观必须被忽略。

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

Answer 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;
  }-*/;

GWT DND更改DataTransfer图像或光标

1 个答案: