2011-11-17 75 views
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沒有運氣(使用最新的穩定版本),所以也許這不是正確的做法。有任何想法嗎?謝謝!

回答

0

您可以嘗試GWT拖拽&拖放API。我已經使用它,甚至在移動設備中也使用它。

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

嘗試這裏的演示,

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

它很容易實現,並沒有任何問題,到目前爲止,我

+1

嗯,我已經使用有一個可行的解決方案gwtquery dnd插件(http://code.google.com/p/gwtquery-plugins/)。我試圖過渡到本地GWT方法,以減少我的外部依賴。但不幸的是,本機對拖放的支持記錄很差。 –