1

ネイティブのGWTドラッグイベントを使用して単純なドラッグアンドドロップFlexTableを作成し、ユーザーが行を移動できるようにしようとしています。

//This works fine
galleryList.getElement().setDraggable(Element.DRAGGABLE_TRUE);
galleryList.addDragStartHandler(new DragStartHandler() {
     @Override
     public void onDragStart(DragStartEvent event) {
         event.setData("text", "Hello World");
         groupList.getElement().getStyle().setBackgroundColor("#aff");
     }
});

ただし、次のことを行いたいと思います。1.アイテムがドロップされる場所を視覚的に示します。2.ドロップイベントが発生したときに、行をドロップする場所を見つけます。

galleryList.addDragOverHandler(new DragOverHandler() {
    @Override
    public void onDragOver(DragOverEvent event) {
       //TODO: How do i get the current location one would drop an item into a flextable here
    }
});

galleryList.addDragEndHandler(new DragEndHandler() {
    @Override
    public void onDragEnd(DragEndEvent event) {
       //TODO: How do i know where i am in the flextable 
    }
});

これらのFlexTableメソッドは、セル/行を取得するのに役立ちます。

public Cell getCellForEvent(ClickEvent event)
protected Element getEventTargetCell(Event event)

しかし問題は、ドラッグイベントがイベントを継承しないことです

前もって感謝します

4

2 に答える 2

1

警告: これでうまくいくとは保証できません。これは私が最終的に作成したコードです (そして私にとってはうまくいきます) - FlexTable から継承するドラッグ アンド ドロップ ウィジェットです。テーブル上のドラッグ イベントを検出し、マウスがその FlexTable の上にある場所を計算してみます。

import com.google.gwt.dom.client.TableRowElement;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Widget;

public class DragFlexTable extends FlexTable implements DraggableWidget {

public String dragStyle = "drag-table-row";
public String dragReplaceStyle;

protected DragVerticalHandler dragFlexTableHandler;

private int currentRow;
private int[] yLocations;
private int rowBeingDragged;

DragFlexTable() {
    sinkEvents(Event.ONMOUSEOVER | Event.ONMOUSEOUT);
    getElement().setDraggable(Element.DRAGGABLE_TRUE);
    final DragUtil dragUtil = new DragUtil();

    addDragStartHandler(new DragStartHandler() {
        @Override
        public void onDragStart(DragStartEvent event) {
            dragUtil.startVerticalDrag(event, DragFlexTable.this);
        }
    });

    addDragEndHandler(new DragEndHandler() {
        @Override
        public void onDragEnd(DragEndEvent event) {
            dragUtil.endVerticalDrag(event, DragFlexTable.this);
        }
    });


    addDragOverHandler(new DragOverHandler() {

        @Override
        public void onDragOver(DragOverEvent event) {
            dragUtil.handleVerticalDragOver(event, DragFlexTable.this, 3);
        }
    });

}

@Override
public void onBrowserEvent(Event event) {
    super.onBrowserEvent(event);
    Element td = getEventTargetCell(event);

    if (td == null) return;
    Element tr = DOM.getParent(td);

    currentRow = TableRowElement.as(td.getParentElement()).getSectionRowIndex();


    switch (DOM.eventGetType(event)) {
        case Event.ONMOUSEOVER: {
            //tr.addClassName(ROW_STYLE_NAME + "-mouseover");
            tr.addClassName(dragStyle);
            break;
        }
        case Event.ONMOUSEOUT: {
            tr.removeClassName(dragStyle);
            break;
        }
    }
}

public void setDragStyle(String dragStyle) {
    this.dragStyle = dragStyle;
}

@Override
public void resetDragState() {
    yLocations = null;
}

@Override
public void setRowBeingDragged(int currentRow) {
    this.rowBeingDragged = currentRow;
}

@Override
public int getDragRow(DragDropEventBase event) {
    if (yLocations == null) {
        yLocations = new int[getRowCount()];
        for (int i = 0; i < getRowCount(); i++) {
            Widget widget = getWidget(i, 0);
            if (widget.isVisible()) {
                com.google.gwt.dom.client.Element imgTd = widget.getElement().getParentElement();
                int absoluteBottom = imgTd.getAbsoluteBottom();
                yLocations[i] = absoluteBottom;
            } else {
                yLocations[i] = -1;
            }
        }
    }

    int lastY = 0;
    for (int i = 0; i < yLocations.length; i++) {
        int absoluteBottom = yLocations[i];
        //invisible
        if (absoluteBottom != -1) {
            int absoluteTop = lastY;
            int clientY = event.getNativeEvent().getClientY();
            if (absoluteBottom > clientY && absoluteTop < clientY) {
                //com.google.gwt.dom.client.Element tr = imgTd.getParentElement();
                return i;
            }
            lastY = absoluteBottom;
        }
    }
    return currentRow;
}


@Override
public com.google.gwt.dom.client.Element getTrElement(int row) {
    return getWidget(row, 0).getElement().getParentElement().getParentElement();
}

@Override
public DragVerticalHandler getDragFlexTableHandler() {
    return dragFlexTableHandler;
}

public void setDragReplaceStyle(String dragReplaceStyle) {
    this.dragReplaceStyle = dragReplaceStyle;
}

@Override
public int getRowBeingDragged() {
    return rowBeingDragged;
}

@Override
public String getDragReplaceStyle() {
    return dragReplaceStyle;
}

public void setDragFlexTableHandler(DragVerticalHandler dragFlexTableHandler) {
    this.dragFlexTableHandler = dragFlexTableHandler;
}

}

これはそれが使用するユーティリティクラスです

import com.google.gwt.event.dom.client.DragEndEvent;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.user.client.ui.Image;

public class DragUtil {
private int alternateIgnoreEvent = 0;
private int lastDragRow = -1;

public void startVerticalDrag(DragStartEvent event, DraggableWidget widget) {
    widget.resetDragState();
    //Required
    event.setData("text", "dragging");
    int currentRow = widget.getDragRow(event);
    widget.setRowBeingDragged(currentRow);

    if (widget.getDragFlexTableHandler()!=null) {
        Image thumbnailImg = widget.getDragFlexTableHandler().getImage(currentRow);
        if (thumbnailImg!=null) {
            event.getDataTransfer().setDragImage(thumbnailImg.getElement(), -10, -10);
        }
    }
}

public void handleVerticalDragOver(DragOverEvent event, DraggableWidget widgets, int sensitivity) {
    if (alternateIgnoreEvent++ % sensitivity != 0) {
        //many events fire, for every pixel move, which slow the browser, so ill ignore some
        return;
    }
    int dragRow = widgets.getDragRow(event);
    if (dragRow != lastDragRow) {
        com.google.gwt.dom.client.Element dragOverTr = widgets.getTrElement(dragRow);
        if (lastDragRow != -1) {
            com.google.gwt.dom.client.Element lastTr = widgets.getTrElement(lastDragRow);
            lastTr.removeClassName(widgets.getDragReplaceStyle());
        }
        lastDragRow = dragRow;
        dragOverTr.addClassName(widgets.getDragReplaceStyle());
    }
}

public void endVerticalDrag(DragEndEvent event, DraggableWidget widgets) {
    int newRowPosition = widgets.getDragRow(event);
    //cleanup last position
    if (newRowPosition != lastDragRow) {
        com.google.gwt.dom.client.Element lastTr = widgets.getTrElement(lastDragRow);
        lastTr.removeClassName(widgets.getDragReplaceStyle());
    }
    if (newRowPosition != widgets.getRowBeingDragged()) {
        com.google.gwt.dom.client.Element dragOverTr = widgets.getTrElement(newRowPosition);
        dragOverTr.removeClassName(widgets.getDragReplaceStyle());
        widgets.getDragFlexTableHandler().moveRow(widgets.getRowBeingDragged(), newRowPosition);
    }
}
}

uibinder では、次のように使用します。

   <adminDnd:DragFlexTable ui:field='itemFlexTable' styleName='{style.table}' cellSpacing='0'
                                                            cellPadding='0'
                                                            dragStyle='{style.drag-table-row-mouseover}'
                                                            dragReplaceStyle='{style.drag-replace-table-row}'
                                        />
于 2013-08-15T14:34:07.460 に答える