GWT可调整大小的面板 [英] GWT resizable panel

问题描述

通过可调整大小，我的意思是如果你在面板边缘拖动它可以调整大小

解决方案

我自己想出了一个例子：

< pre class =lang-java prettyprint-override> public class DraggablePanel extends VerticalPanel {
private boolean isBeingDragged = false;
private boolean isBeingMoved = false;
private元素movingPanelElement;

public void setMovingPanelElement（Element movingPanelElement）{
this.movi​​ngPanelElement = movingPanelElement;
}

public DraggablePanel（）{
super（）;
DOM.sinkEvents（getElement（），Event.ONMOUSEDOWN | Event.ONMOUSEMOVE
| Event.ONMOUSEUP | Event.ONMOUSEOVER）;
}

@Override
public void onBrowserEvent（Event event）{
final int eventType = DOM.eventGetType（event）;
if（Event.ONMOUSEOVER == eventType）{
if（isCursorResize（event））{
getElement（）。getStyle（）。setProperty（cursor，s-resize） ;
} else if（isCursorMove（event））{
getElement（）。getStyle（）。setProperty（cursor，move）;
} else {
getElement（）。getStyle（）。setProperty（cursor，default）; $（b）b
$ b $ if（Event.ONMOUSEDOWN == eventType）{
if（isCursorResize（event））{
if（！isBeingDragged）{
isBeingDragged = true;
DOM.setCapture（getElement（））;
}
} else if（isCursorMove（event））{
DOM.setCapture（getElement（））;
isBeingMoved = true;

} else if（Event.ONMOUSEMOVE == eventType）{
if（！isCursorResize（event）&&！isCursorMove（event））{
getElement（） .getStyle（）。setProperty（cursor，default）;
}
if（isBeingDragged）{
int currentY = event.getClientY（）;
int originalY = getElement（）。getAbsoluteTop（）;
if（currentY> originalY）{
Integer height = currentY - originalY;
this.setHeight（height +px）;
}
} else if（isBeingMoved）{
RootPanel.get（）。setWidgetPosition（this，
event.getClientX（），event.getClientY（））;
}
} else if（Event.ONMOUSEUP == eventType）{
if（isBeingMoved）{
isBeingMoved = false;
DOM.releaseCapture（getElement（））;
}
if（isBeingDragged）{
isBeingDragged = false;
DOM.releaseCapture（getElement（））;



$ b protected boolean isCursorResize（Event event）{
int cursor = event.getClientY（）;
int initial = getAbsoluteTop（）;
int height = getOffsetHeight（）;
返回初始值+高度 - 20 <光标&&光标< =初始值+高度;
}

protected boolean isCursorMove（Event event）{
int cursor = event.getClientY（）;
int initial = movingPanelElement.getAbsoluteTop（）;
int height = movingPanelElement.getOffsetHeight（）;
返回初始值< =游标&&光标< =初始值+高度;
}
}


Is there any way to have a 'Resizable' panel in GWT.

By resizable I mean that if you you drag on the edge of Panel it can be resized accordingly.

解决方案

Figured it out myself, here is an example:

public class DraggablePanel extends VerticalPanel {
    private boolean isBeingDragged = false;
    private boolean isBeingMoved = false;
    private Element movingPanelElement;

    public void setMovingPanelElement(Element movingPanelElement) {
        this.movingPanelElement = movingPanelElement;
    }

    public DraggablePanel() {
        super();
        DOM.sinkEvents(getElement(), Event.ONMOUSEDOWN | Event.ONMOUSEMOVE
                | Event.ONMOUSEUP | Event.ONMOUSEOVER);
    }

    @Override
    public void onBrowserEvent(Event event) {
        final int eventType = DOM.eventGetType(event);
        if (Event.ONMOUSEOVER == eventType) {
            if (isCursorResize(event)) {
                getElement().getStyle().setProperty("cursor", "s-resize");
            } else if (isCursorMove(event)) {
                getElement().getStyle().setProperty("cursor", "move");
            } else {
                getElement().getStyle().setProperty("cursor", "default");
            }
        }
        if (Event.ONMOUSEDOWN == eventType) {
            if (isCursorResize(event)) {
                if (!isBeingDragged) {
                    isBeingDragged = true;
                    DOM.setCapture(getElement());
                }
            } else if (isCursorMove(event)) {
                DOM.setCapture(getElement());
                isBeingMoved = true;
            }
        } else if (Event.ONMOUSEMOVE == eventType) {
            if (!isCursorResize(event) && !isCursorMove(event)) {
                getElement().getStyle().setProperty("cursor", "default");
            }
            if (isBeingDragged) {
                int currentY = event.getClientY();
                int originalY = getElement().getAbsoluteTop();
                if (currentY > originalY) {
                    Integer height = currentY - originalY;
                    this.setHeight(height + "px");
                }
            } else if (isBeingMoved) {
                RootPanel.get().setWidgetPosition(this,
                        event.getClientX(), event.getClientY());
            }
        } else if (Event.ONMOUSEUP == eventType) {
            if (isBeingMoved) {
                isBeingMoved = false;
                DOM.releaseCapture(getElement());
            }
            if (isBeingDragged) {
                isBeingDragged = false;
                DOM.releaseCapture(getElement());
            }
        }
    }

    protected boolean isCursorResize(Event event) {
        int cursor = event.getClientY();
        int initial = getAbsoluteTop();
        int height = getOffsetHeight();
        return initial + height - 20 < cursor && cursor <= initial + height;
    }

    protected boolean isCursorMove(Event event) {
        int cursor = event.getClientY();
        int initial = movingPanelElement.getAbsoluteTop();
        int height = movingPanelElement.getOffsetHeight();
        return initial <= cursor && cursor <= initial + height;
    }
}

这篇关于GWT可调整大小的面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！