如何在DataGrid中为单元格创建Drag n Drop

Question

我正在尝试将drag-n-drop添加到单元格小部件中.更具体地说,我想拖放ClickableTextCells,但他们没有具体的方法,甚至没有.addDomHandler,所以我不能只是创建像.addDomHandler(new DragStartHandler() { ... }

有人可以帮助DnD细胞,最好是纯GWT？

Answer 1

我不知道如何使用 GWT 实现 DnD，但我知道如何实现 CnC (Clic \'n Clic)，这可能会让您感兴趣。DnD 很酷、很有趣、很漂亮，但我认为有时候它们不是很方便。比如说你有一个大屏幕，需要滚动，如果你想从上到下DnD某个项目，那么按住鼠标就不太方便了……但这只是个人感觉……

\n\n

无论如何，我建议您使用 ListDataProvider 和简单事件，以便移动您的项目：第一个 clic 选择源项目，第二个 clic 选择目标。一旦知道来源和目的地，您就可以移动您的物品。

\n\n

它对我来说效果很好......如果您添加一些样式来突出显示源和目的地，那就非常好。

\n\n

例子：

\n\n

这是主要的类：

\n\n

        import java.util.ArrayList;\n\n        import com.google.gwt.event.dom.client.ClickEvent;\n        import com.google.gwt.event.dom.client.ClickHandler;\n        import com.google.gwt.user.cellview.client.CellList;\n        import com.google.gwt.user.client.ui.DialogBox;\n        import com.google.gwt.user.client.ui.FlowPanel;\n        import com.google.gwt.user.client.ui.FocusPanel;\n        import com.google.gwt.user.client.ui.Grid;\n        import com.google.gwt.user.client.ui.Label;\n        import com.google.gwt.view.client.ListDataProvider;\n        import com.google.gwt.view.client.SelectionChangeEvent;\n        import com.google.gwt.view.client.SingleSelectionModel;\n\n        public class Clic_Clic {\n\n          private static final Integer LEFT = 0;\n\n          private static final Integer CENTER = 1;\n\n          private static final Integer RIGHT = 2;\n\n          private ClicClicSelectionModel<Item> selectionModel = new ClicClicSelectionModel<Item>();\n\n          ListDataProvider<Item> leftLDP = new ListDataProvider<Item>();\n\n          ListDataProvider<Item> centerLDP = new ListDataProvider<Item>();\n\n          ListDataProvider<Item> rightLDP = new ListDataProvider<Item>();\n\n          FocusPanel left = new FocusPanel(), center = new FocusPanel(), right = new FocusPanel();\n\n          Item selected = null;\n\n          public Clic_Clic() {\n\n            // --- Builds the GUI\n            DialogBox clic_clic = buildGUI();\n            clic_clic.center();\n            clic_clic.show();\n\n            // --- Initializes data\n            configureSelectionManagement();\n            initCellLists();\n            configureAddAndRemove();\n\n            // --- Fills the left LDP\n            leftLDP.getList().add(new Item("Fraternit\xc3\xa9", LEFT));\n            leftLDP.refresh();\n\n            // --- Fills the center LDP\n            centerLDP.getList().add(new Item("Egalit\xc3\xa9", LEFT));\n            centerLDP.refresh();\n\n            // --- Fills the right LDP\n            rightLDP.getList().add(new Item("Libert\xc3\xa9", RIGHT));\n            rightLDP.refresh();\n          }\n\n          private DialogBox buildGUI() {\n            DialogBox db = new DialogBox();\n            db.setText("A simple example for Clic \'n Clic");\n            db.setSize("300px", "200px");\n            db.setGlassEnabled(true);\n            db.setModal(true);\n\n            FlowPanel fp = buildContent();\n            db.add(fp);\n\n            return db;\n          }\n\n          private FlowPanel buildContent() {\n\n            Grid g = new Grid(1, 3);\n            g.setSize("300px", "200px");\n\n            g.setWidget(0, 0, left);\n            left.setSize("100px", "100px");\n            left.getElement().getStyle().setBackgroundColor("blue");\n\n            g.setWidget(0, 1, center);\n            center.setSize("100px", "100px");\n\n            g.setWidget(0, 2, right);\n            right.setSize("100px", "100px");\n            right.getElement().getStyle().setBackgroundColor("red");\n\n            FlowPanel fp = new FlowPanel();\n            fp.setSize("300px", "200px");\n            fp.add(new Label("Do you know the correct order ?"));\n            fp.add(g);\n\n            return fp;\n          }\n\n          private void initCellLists() {\n            // --- Associates the left panel with the leftLDP ListDataProvider\n            CellList<Item> cellListLeft = new CellList<Item>(new MyCell());\n            cellListLeft.setSelectionModel(selectionModel);\n            left.add(cellListLeft);\n            leftLDP = new ListDataProvider<Item>(new ArrayList<Item>());\n            leftLDP.addDataDisplay(cellListLeft);\n\n            // --- Associates the center panel with the centerLDP ListDataProvider\n            CellList<Item> cellListCenter = new CellList<Item>(new MyCell());\n            cellListCenter.setSelectionModel(selectionModel);\n            center.add(cellListCenter);\n            centerLDP = new ListDataProvider<Item>(new ArrayList<Item>());\n            centerLDP.addDataDisplay(cellListCenter);\n\n            // --- Associates the right panel with the rightLDP ListDataProvider\n            CellList<Item> cellListRight = new CellList<Item>(new MyCell());\n            cellListRight.setSelectionModel(selectionModel);\n            right.add(cellListRight);\n            rightLDP = new ListDataProvider<Item>(new ArrayList<Item>());\n            rightLDP.addDataDisplay(cellListRight);\n          }\n\n          private void configureAddAndRemove() {\n            // --- If the user clic on the left\n            left.addClickHandler(new ClickHandler() {\n\n              @Override\n              public void onClick(ClickEvent event) {\n                if (selected != null) {\n                  // --- If the selected item comes from the right\n                  if (selected.getContainerIndex() == RIGHT) {\n                    rightLDP.getList().remove(selected);\n                    rightLDP.refresh();\n\n                    selected.setContainerIndex(LEFT);\n                    leftLDP.getList().add(selected);\n                    leftLDP.refresh();\n\n                    selected = null;\n                  }\n                  // --- If the selected item comes from the center\n                  if (selected.getContainerIndex() == CENTER) {\n                    centerLDP.getList().remove(selected);\n                    centerLDP.refresh();\n\n                    selected.setContainerIndex(LEFT);\n                    leftLDP.getList().add(selected);\n                    leftLDP.refresh();\n\n                    selected = null;\n                  }\n                }\n              }\n            });\n            // --- If the user clic on the center\n            center.addClickHandler(new ClickHandler() {\n\n              @Override\n              public void onClick(ClickEvent event) {\n                if (selected != null) {\n                  // --- If the selected item comes from the right\n                  if (selected.getContainerIndex() == RIGHT) {\n                    rightLDP.getList().remove(selected);\n                    rightLDP.refresh();\n\n                    selected.setContainerIndex(CENTER);\n                    centerLDP.getList().add(selected);\n                    centerLDP.refresh();\n\n                    selected = null;\n                  }\n                  // --- If the selected item comes from the left\n                  if (selected.getContainerIndex() == LEFT) {\n                    leftLDP.getList().remove(selected);\n                    leftLDP.refresh();\n\n                    selected.setContainerIndex(CENTER);\n                    centerLDP.getList().add(selected);\n                    centerLDP.refresh();\n\n                    selected = null;\n                  }\n                }\n              }\n            });\n            // --- If the user clic on the right\n            right.addClickHandler(new ClickHandler() {\n\n              @Override\n              public void onClick(ClickEvent event) {\n                // --- If the selected item comes from the left\n                if (selected.getContainerIndex() == LEFT) {\n                  leftLDP.getList().remove(selected);\n                  leftLDP.refresh();\n\n                  selected.setContainerIndex(RIGHT);\n                  rightLDP.getList().add(selected);\n                  rightLDP.refresh();\n\n                  selected = null;\n                }\n                // --- If the selected item comes from the center\n                if (selected.getContainerIndex() == CENTER) {\n                  centerLDP.getList().remove(selected);\n                  centerLDP.refresh();\n\n                  selected.setContainerIndex(RIGHT);\n                  rightLDP.getList().add(selected);\n                  rightLDP.refresh();\n\n                  selected = null;\n                }\n              }\n            });\n          }\n\n          @SuppressWarnings("hiding")\n          class ClicClicSelectionModel<Item> extends SingleSelectionModel<Item> {\n\n            @Override\n            public void setSelected(Item object, boolean selected) {\n              if (getSelectedObject() != null && getSelectedObject().equals(object)) {\n                super.setSelected(object, !selected);\n              } else {\n                super.setSelected(object, selected);\n              }\n            };\n          }\n\n          private void configureSelectionManagement() {\n            selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {\n\n              @Override\n              public void onSelectionChange(SelectionChangeEvent event) {\n                Item selected = selectionModel.getSelectedObject();\n                updateSelected(selected);\n              }\n\n            });\n\n          }\n\n          private void updateSelected(Item item) {\n            // --- If no item has been selected, update the selected item\n            if (selected == null) {\n              selected = item;\n            }\n          }\n\n        }\n

\n\n

你还需要这个：

\n\n

        public class Item {\n\n          private String label;\n\n          private Integer containerIndex;\n\n          public Item(String l, Integer id) {\n            this.label = l;\n            this.containerIndex = id;\n          }\n\n          public String getLabel() {\n            return label;\n          }\n\n          public void setLabel(String label) {\n            this.label = label;\n          }\n\n          public Integer getContainerIndex() {\n            return containerIndex;\n          }\n\n          public void setContainerIndex(Integer containerIndex) {\n            this.containerIndex = containerIndex;\n          }\n\n        }\n

\n\n

最后，这个：

\n\n

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

\n\n

给你。\n下次我会尝试做一个有趣的例子:)

\n\n

希望能帮助到你。

\n