Drag and drop to and from the same celltable

[Reuben Firmin]

I want to use gwtquery to rearrange row order in a celltable. I think I'm close, but I have several questions. First, here's my code (questions follow):

    static interface Templates extends SafeHtmlTemplates {

        final Templates INSTANCE = GWT.create(Templates.class);

        @Template("<div id='dragHelper' style='border:1px solid black; background-color:#ffffff; color:black; width:150px;'></div>")

        SafeHtml outerHelper();

    }

    private void addIndexColumn(final DragAndDropCellTable<MyDisplayModel> table) {

        final TextCell indexCell = new TextCell();

        final DragAndDropColumn<MyDisplayModel, String> columnIndex = new DragAndDropColumn<MyDisplayModel, String>(indexCell) {

            @Override

            public String getValue(MyDisplayModel object) {

                return object.getColumnIndex() + "";

            }

        };

        columnIndex.setSortable(true);

        table.addColumn(columnIndex, new Header<String>(new TextCell()) {

            @Override

            public String getValue() {

                return "Index";

            }

        });

        table.setColumnWidth(columnIndex, 70.0, Style.Unit.PX);

        columnIndex.getDroppableOptions().setAccept(new AcceptFunction() {

            @Override

            public boolean acceptDrop(final DragAndDropContext dragAndDropContext) {

                return true;

            }

        });

        columnIndex.getDraggableOptions().setCursor(Cursor.CROSSHAIR);

        columnIndex.getDroppableOptions().setOnDrop(new DroppableFunction() {

            @Override

            public void f(DragAndDropContext dragAndDropContext) {

                Window.alert("hello2!");

            }

        });

        initDragOperation(columnIndex);

        table.addDragStartHandler(new DragStartEventHandler() {

            public void onDragStart(DragStartEvent event) {

                final MyDisplayModel model = event.getDraggableData();

                final Element helper = event.getHelper();

                helper.setInnerHTML("<b>" + model.getIndex() + "</b>");

            }

        });

        table.addDropHandler(new DropEventHandler() {

            @Override

            public void onDrop(DropEvent dropEvent) {

                Window.alert("hello!");

            }

        });

    }

    private void initDragOperation(DragAndDropColumn<?, ?> column) {

        DraggableOptions draggableOptions = column.getDraggableOptions();

        draggableOptions.setHelper($(Templates.INSTANCE.outerHelper().asString()));

        draggableOptions.setOpacity((float) 0.8);

        draggableOptions.setCursor(Cursor.MOVE);

        draggableOptions.setRevert(RevertOption.ON_INVALID_DROP);

        draggableOptions.setCancel("select");

    }

The column contains a count of 1...N. When I click and drag, I get the popup div, but neither the dropfunction or the drophandler are ever triggered. Am I missing something that initializes the column to receive drop events?

Also, could you make the source available in the maven repository? I learn a lot by reading widget code, so it'd be handy here.

Thanks

Reuben

[Julien Dramaix]

The best you have to do is to check this example and its associated sources :
http://julien-labs.googlecode.com/svn/trunk/sortablecellwidget/demo/SortableCellList/sortablecelllist.html

This examples I wrote a few months ago shows you how to implement a
sortable CellList. It should be easily adaptable for a CellTable.

> Also, could you make the source available in the maven repository? I learn a
> lot by reading widget code, so it'd be handy here.

If you are talking about the source code of the d-n-d plugin, you will
find it in the jar itself... GWT has to access the source code in
order to compile.

Julien

> --
> You received this message because you are subscribed to the Google Groups
> "gwtquery" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/gwtquery/-/yKcOiDLkbUwJ.
> To post to this group, send email to gwtq...@googlegroups.com.
> To unsubscribe from this group, send email to
> gwtquery+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/gwtquery?hl=en.
>

[Reuben Firmin]

Working on a fairly literal translation of your example; in progress. I found one bug; DroppableWidget acts as a widget's parent, thus prevents the ability of the widget to be subsequently added to a panel.

Thus, if you do:

DragAndDropCellTable t = ...

DroppableWidget dw = new DroppableWidget(t);

VerticalPanel p = new VerticalPanel();

p.add(t);

...gwt will throw an exception:

java.lang.IllegalStateException: This widget's parent does not implement HasWidgets
	at com.google.gwt.user.client.ui.Widget.removeFromParent(Widget.java:199)
	at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:88)
	at com.google.gwt.user.client.ui.VerticalPanel.add(VerticalPanel.java:48)

If you instead do 

DragAndDropCellTable t = ...
VerticalPanel p = new VerticalPanel();
p.add(t);
DroppableWidget dw = new DroppableWidget(t);

...then the table renders.

[Reuben Firmin]

Ah, I see my problem; the DroppableWidget is what actually needs to be added to the panel.

I think I would find the API more intuitive if DragAndDropCellTable had both setDraggable and setDroppable as boolean flags; the latter would just pull in all of what DroppableWidget provides.

Thanks for the example; I got this to work.