4
我需要爲CellTable
中的單元格執行拖放操作。繼從MobileWebApp的例子中,我實現了自定義可拖動單元格:在GWT 2.4中設置拖動圖像
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沒有運氣(使用最新的穩定版本),所以也許這不是正確的做法。有任何想法嗎?謝謝!
嗯,我已經使用有一個可行的解決方案gwtquery dnd插件(http://code.google.com/p/gwtquery-plugins/)。我試圖過渡到本地GWT方法,以減少我的外部依賴。但不幸的是,本機對拖放的支持記錄很差。 –