我正在尝试将拖放添加到单元小部件。更具体地说,我想拖放ClickableTextCell,但是它们没有特定的方法,甚至没有.addDomHandler,所以我不能只创建像.addDomHandler(new DragStartHandler() { ... }这样的东西

有人可以提供一些有关如何分离DnD细胞的帮助,最好是使用纯GWT吗?

最佳答案

我不知道如何用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);
            }

          }

        }

干得好。
下次,我将尝试举一个有趣的例子:)

希望能帮助到你。

10-06 07:05