Question

我需要为CellTable中的单元格实施拖放操作。按照MobileWebApp的示例，我实现了一个自定义可拖动单元格：

public class DraggableCell extends AbstractCell<ProductProxy>{

interface Templates extends SafeHtmlTemplates {
    @SafeHtmlTemplates.Template("<div draggable=\"true\">{0}</div>")
    SafeHtml simpleTextTemplate(String text);
}

protected Templates templates = GWT.create(Templates.class);

public DraggableCell() {
    super("dragstart");
}

@Override
public void render(Context context, ProductProxy value, SafeHtmlBuilder sb){
        sb.append(templates.simpleTextTemplate(value.getName()));
}

@Override
public void onBrowserEvent(Context context, Element parent, 
                           ProductProxy value, NativeEvent event, 
                           ValueUpdater<ProductProxy> valueUpdater) {
    final Integer cursorOffsetX = 0;
    final Integer cursorOffsetY = 0;

    if ("dragstart".equals(event.getType())) {
        // Save the ID of the entity
        DataTransfer dataTransfer = event.getDataTransfer();
        dataTransfer.setData("text", value.getId());

        SafeHtmlBuilder sb = new SafeHtmlBuilder();
        sb.appendEscaped(value.getSn());

        Element element = DOM.createDiv();
        element.setInnerHTML(sb.toSafeHtml().asString());

        // Set the helper image.
        dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY);
    }
}

我为拖动图像使用了一个新元素（在MobileWebApp中他们只使用父元素），但遗憾的是在拖动过程中没有显示图像。我想可能首先需要将新元素附加到DOM，所以我创建了一个helperPanel并将元素附加到它：

DOM.getElementById("dragHelperPanel").appendChild(element);
// Set the helper image.
dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY);

这在Firefox 6中运行良好，但在Chrome中没有运气（使用最新的稳定版本），所以这可能不是正确的方法。有任何想法吗？谢谢！

Answer 1

你可以试试GWT Drag＆amp; Drop API。我已经使用过它，即使在移动设备中也是如此。

http://code.google.com/p/gwt-dnd/

在这里试试演示，

http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html

实施起来非常简单，到目前为止我没有任何问题

在GWT 2.4中设置拖动图像

1 个答案: