4

GWT-dndを使用して、ビューポートをドラッグ可能にします。ビューポートは、大きな地図の一部を表示する固定サイズのウィンドウです。次の図に示すように:

ここに画像の説明を入力

この投稿に従いました: GWT で要素マップの ViewPort を移動しますか? これは正常に動作しますが、GWT-dnd で動作させることができませんでした。GWT-dnd.

次の簡単なシナリオを作成しました。

ここに画像の説明を入力

私の問題は、ドラッグ パネルがドロップ パネルより小さい場合にのみ、GWT-dnd を機能させることができることです。私の場合、黄色のボックスであるマップ (キャンバス) は、ビューポートよりもはるかに大きくなっています。ビューポートをドロップ領域として作成し、マップをドラッグ可能にすると、機能しません。マップをドラッグしようとすると、ビューポートの 1 つの境界によって調整されます。それだけです。

必要なのは次のとおりです: マップ (ビューポートに表示されているマップの一部) をドラッグすると、マップの位置が変更されます。たとえば、マップを下にドラッグすると、次の画像のようになります。

ここに画像の説明を入力

ユーザーが実際に目にするのは次のとおりです。

ここに画像の説明を入力

ScreenView.ui.xml ファイルで行ったことは次のとおりです。

    <g:AbsolutePanel ui:field="viewport" addStyleNames="{resources.screenCss.viewportContainer}">
        <g:FocusPanel ui:field="canvasFocus"
                        addStyleNames="{resources.screenCss.focusPanel}">
            <g:AbsolutePanel ui:field="canvas"
                        addStyleNames="{resources.screenCss.canvas}">

                    <g:HTMLPanel  addStyleNames="{resources.screenCss.mapContainer}">

                        <g:FlowPanel ui:field="test1" addStyleNames="{resources.screenCss.test1}">
                            <g:HTML>test1</g:HTML>
                        </g:FlowPanel>

                        <g:FlowPanel ui:field="test2" addStyleNames="{resources.screenCss.test2}">
                            <g:HTML>test2</g:HTML>
                        </g:FlowPanel>

                    </g:HTMLPanel>


            </g:AbsolutePanel>
        </g:FocusPanel>
    </g:AbsolutePanel>

私のScreeView.javaでは、次のことを行います。

@UiField
AbsolutePanel viewport;

@UiField
AbsolutePanel canvas;

@UiField
FlowPanel test1;

private PickupDragController dragController;
private DropController dropController;

    // create drag controller
dragController = new PickupDragController(viewport, true);

    // create drop controller 
    dropController = new AbsolutePositionDropController(canvas);
    dragController.registerDropController(dropController);

    // make test1 draggable
    FocusPanel focusPanel = new FocusPanel();
focusPanel.addStyleName(resources.screenCss().noteFocusPanel());
test1.add(focusPanel);
    canvas.add(test1);
    dragController.makeDraggable(test1, focusPanel);

これで赤い四角形がドラッグ可能になりました。

マップ (キャンバス) をドラッグ可能にするにはどうすればよいですか?

ここのコードでプロジェクトを作成しました: https://github.com/confile/test5

4

1 に答える 1

2

別のレイヤリングを試すことができます。

レイヤー 0: キャンバスをドラッグできません (ビュー ポートを制約するベース フレーム)

レイヤー 1: マップ - ドラッグ可能 (側面がキャンバス レイヤーにスナップ)

レイヤー 2: ビュー ポート - ドラッグ可能 (何らかのハンドルまたはキャンバス領域に拘束されたフレームを介して)

于 2013-11-07T22:28:52.267 に答える