如何在DataGrid中爲單元格創建拖拽

我正在嘗試添加拖拽到單元格窗口小部件。更具體地講，我想拖放ClickableTextCell S中，但沒有具體的方法，而不是連.addDomHandler，所以我不能只是創造一些像.addDomHandler(new DragStartHandler() { ... }如何在DataGrid中爲單元格創建拖拽

有人能就如何DND細胞一些幫助，最好用純GWT？

來源

2012-12-05 user1879896

我不知道如何實現與GWT DnD，但我知道如何實施CnC（Clic'n Clic），這可能會讓你感興趣。 DnD很酷，有趣又漂亮，但我覺得有些時候他們不太方便。例如，如果你有一個大屏幕需要滾動，並且如果你想從頂部到底部DnD項目，那麼拿起鼠標不太方便......但是這只是個人感覺......

無論如何，我會建議您使用ListDataProvider以及簡單事件，以便移動您的項目：第一個clic選擇源項目，第二個clic選擇目標。一旦知道了來源和目的地，您就可以移動您的物品。

它適用於我...如果您添加一些樣式來突出顯示源和目的地，它是非常好的。

例子：

這是主類：

 import java.util.ArrayList; 

     import com.google.gwt.event.dom.client.ClickEvent; 
     import com.google.gwt.event.dom.client.ClickHandler; 
     import com.google.gwt.user.cellview.client.CellList; 
     import com.google.gwt.user.client.ui.DialogBox; 
     import com.google.gwt.user.client.ui.FlowPanel; 
     import com.google.gwt.user.client.ui.FocusPanel; 
     import com.google.gwt.user.client.ui.Grid; 
     import com.google.gwt.user.client.ui.Label; 
     import com.google.gwt.view.client.ListDataProvider; 
     import com.google.gwt.view.client.SelectionChangeEvent; 
     import com.google.gwt.view.client.SingleSelectionModel; 

     public class Clic_Clic { 

      private static final Integer LEFT = 0; 

      private static final Integer CENTER = 1; 

      private static final Integer RIGHT = 2; 

      private ClicClicSelectionModel<Item> selectionModel = new ClicClicSelectionModel<Item>(); 

      ListDataProvider<Item> leftLDP = new ListDataProvider<Item>(); 

      ListDataProvider<Item> centerLDP = new ListDataProvider<Item>(); 

      ListDataProvider<Item> rightLDP = new ListDataProvider<Item>(); 

      FocusPanel left = new FocusPanel(), center = new FocusPanel(), right = new FocusPanel(); 

      Item selected = null; 

      public Clic_Clic() { 

      // --- Builds the GUI 
      DialogBox clic_clic = buildGUI(); 
      clic_clic.center(); 
      clic_clic.show(); 

      // --- Initializes data 
      configureSelectionManagement(); 
      initCellLists(); 
      configureAddAndRemove(); 

      // --- Fills the left LDP 
      leftLDP.getList().add(new Item("Fraternité", LEFT)); 
      leftLDP.refresh(); 

      // --- Fills the center LDP 
      centerLDP.getList().add(new Item("Egalité", LEFT)); 
      centerLDP.refresh(); 

      // --- Fills the right LDP 
      rightLDP.getList().add(new Item("Liberté", RIGHT)); 
      rightLDP.refresh(); 
      } 

      private DialogBox buildGUI() { 
      DialogBox db = new DialogBox(); 
      db.setText("A simple example for Clic 'n Clic"); 
      db.setSize("300px", "200px"); 
      db.setGlassEnabled(true); 
      db.setModal(true); 

      FlowPanel fp = buildContent(); 
      db.add(fp); 

      return db; 
      } 

      private FlowPanel buildContent() { 

      Grid g = new Grid(1, 3); 
      g.setSize("300px", "200px"); 

      g.setWidget(0, 0, left); 
      left.setSize("100px", "100px"); 
      left.getElement().getStyle().setBackgroundColor("blue"); 

      g.setWidget(0, 1, center); 
      center.setSize("100px", "100px"); 

      g.setWidget(0, 2, right); 
      right.setSize("100px", "100px"); 
      right.getElement().getStyle().setBackgroundColor("red"); 

      FlowPanel fp = new FlowPanel(); 
      fp.setSize("300px", "200px"); 
      fp.add(new Label("Do you know the correct order ?")); 
      fp.add(g); 

      return fp; 
      } 

      private void initCellLists() { 
      // --- Associates the left panel with the leftLDP ListDataProvider 
      CellList<Item> cellListLeft = new CellList<Item>(new MyCell()); 
      cellListLeft.setSelectionModel(selectionModel); 
      left.add(cellListLeft); 
      leftLDP = new ListDataProvider<Item>(new ArrayList<Item>()); 
      leftLDP.addDataDisplay(cellListLeft); 

      // --- Associates the center panel with the centerLDP ListDataProvider 
      CellList<Item> cellListCenter = new CellList<Item>(new MyCell()); 
      cellListCenter.setSelectionModel(selectionModel); 
      center.add(cellListCenter); 
      centerLDP = new ListDataProvider<Item>(new ArrayList<Item>()); 
      centerLDP.addDataDisplay(cellListCenter); 

      // --- Associates the right panel with the rightLDP ListDataProvider 
      CellList<Item> cellListRight = new CellList<Item>(new MyCell()); 
      cellListRight.setSelectionModel(selectionModel); 
      right.add(cellListRight); 
      rightLDP = new ListDataProvider<Item>(new ArrayList<Item>()); 
      rightLDP.addDataDisplay(cellListRight); 
      } 

      private void configureAddAndRemove() { 
      // --- If the user clic on the left 
      left.addClickHandler(new ClickHandler() { 

       @Override 
       public void onClick(ClickEvent event) { 
       if (selected != null) { 
        // --- If the selected item comes from the right 
        if (selected.getContainerIndex() == RIGHT) { 
        rightLDP.getList().remove(selected); 
        rightLDP.refresh(); 

        selected.setContainerIndex(LEFT); 
        leftLDP.getList().add(selected); 
        leftLDP.refresh(); 

        selected = null; 
        } 
        // --- If the selected item comes from the center 
        if (selected.getContainerIndex() == CENTER) { 
        centerLDP.getList().remove(selected); 
        centerLDP.refresh(); 

        selected.setContainerIndex(LEFT); 
        leftLDP.getList().add(selected); 
        leftLDP.refresh(); 

        selected = null; 
        } 
       } 
       } 
      }); 
      // --- If the user clic on the center 
      center.addClickHandler(new ClickHandler() { 

       @Override 
       public void onClick(ClickEvent event) { 
       if (selected != null) { 
        // --- If the selected item comes from the right 
        if (selected.getContainerIndex() == RIGHT) { 
        rightLDP.getList().remove(selected); 
        rightLDP.refresh(); 

        selected.setContainerIndex(CENTER); 
        centerLDP.getList().add(selected); 
        centerLDP.refresh(); 

        selected = null; 
        } 
        // --- If the selected item comes from the left 
        if (selected.getContainerIndex() == LEFT) { 
        leftLDP.getList().remove(selected); 
        leftLDP.refresh(); 

        selected.setContainerIndex(CENTER); 
        centerLDP.getList().add(selected); 
        centerLDP.refresh(); 

        selected = null; 
        } 
       } 
       } 
      }); 
      // --- If the user clic on the right 
      right.addClickHandler(new ClickHandler() { 

       @Override 
       public void onClick(ClickEvent event) { 
       // --- If the selected item comes from the left 
       if (selected.getContainerIndex() == LEFT) { 
        leftLDP.getList().remove(selected); 
        leftLDP.refresh(); 

        selected.setContainerIndex(RIGHT); 
        rightLDP.getList().add(selected); 
        rightLDP.refresh(); 

        selected = null; 
       } 
       // --- If the selected item comes from the center 
       if (selected.getContainerIndex() == CENTER) { 
        centerLDP.getList().remove(selected); 
        centerLDP.refresh(); 

        selected.setContainerIndex(RIGHT); 
        rightLDP.getList().add(selected); 
        rightLDP.refresh(); 

        selected = null; 
       } 
       } 
      }); 
      } 

      @SuppressWarnings("hiding") 
      class ClicClicSelectionModel<Item> extends SingleSelectionModel<Item> { 

      @Override 
      public void setSelected(Item object, boolean selected) { 
       if (getSelectedObject() != null && getSelectedObject().equals(object)) { 
       super.setSelected(object, !selected); 
       } else { 
       super.setSelected(object, selected); 
       } 
      }; 
      } 

      private void configureSelectionManagement() { 
      selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() { 

       @Override 
       public void onSelectionChange(SelectionChangeEvent event) { 
       Item selected = selectionModel.getSelectedObject(); 
       updateSelected(selected); 
       } 

      }); 

      } 

      private void updateSelected(Item item) { 
      // --- If no item has been selected, update the selected item 
      if (selected == null) { 
       selected = item; 
      } 
      } 

     }

你還需要這一個：

 public class Item { 

      private String label; 

      private Integer containerIndex; 

      public Item(String l, Integer id) { 
      this.label = l; 
      this.containerIndex = id; 
      } 

      public String getLabel() { 
      return label; 
      } 

      public void setLabel(String label) { 
      this.label = label; 
      } 

      public Integer getContainerIndex() { 
      return containerIndex; 
      } 

      public void setContainerIndex(Integer containerIndex) { 
      this.containerIndex = containerIndex; 
      } 

     }

最後，這一個：

 import com.google.gwt.cell.client.AbstractCell; 
     import com.google.gwt.safehtml.shared.SafeHtml; 
     import com.google.gwt.safehtml.shared.SafeHtmlBuilder; 
     import com.google.gwt.safehtml.shared.SafeHtmlUtils; 

     public class MyCell extends AbstractCell<Item> { 

      @Override 
      public void render(com.google.gwt.cell.client.Cell.Context context, Item value, SafeHtmlBuilder sb) { 
      if (value != null) { 
       // --- If the value comes from the user, we escape it to avoid XSS 
       // attacks. 
       SafeHtml safeValue = SafeHtmlUtils.fromString(value.getLabel()); 
       sb.append(safeValue); 
      } 

      } 

     }

這裏你走。下次我會試着做一個有趣的例子:)

希望它有幫助。

來源

2012-12-05 18:55:09 tlapeg07

你能分享一些你的CnC實現代碼嗎？ – Neeko

我會盡力在這個週末做一些簡單的事情。 – tlapeg07

我對此也很感興趣，雖然它可能對我沒有多大幫助，因爲在這種情況下DnD被用作複製機制，並且只需單擊打開項目上的編輯對話框即可。 – user1879896

如何在DataGrid中爲單元格創建拖拽

回答

相關問題