2

ドラッグ アンド ドロップ動作を実装して順序を変更したい (ランダムな数の行と列を持つギャラリー、画面サイズによって異なります) 内部に多くの写真ウィジェットを含むフロー パネルがあります。gwt-dndライブラリを使用しています。これにより、ドラッグされたウィジェットをドロップする候補の場所を示す独自のポジショナーFlowPanelDropController(区切り文字) を定義できます。

このポジショナーを幅が定義された空のスペースにしたいのですが、難しいのは、ポジショナーが追加および削除されたときのスライド アニメーション効果を実装することです。デスクトップの Picasa アプリのユーザーなら、私の言いたいことがわかるでしょう。ターゲット行が両側 (少し左、少し右) にスライドして、写真をドロップしようとしている項目間のスペースを広げます。

全体は十分に複雑ですが、ポジショナーの取り付け/取り外しにアニメーションを適用する方法に関連するヘルプは大歓迎です。これがどのように役立つかについてのアイデアがある場合は、別のアプローチを使用する必要があるかもしれません (たとえば、gwt-dnd lib の代わりに GWT ネイティブ dnd を使用し、「ポジショナー」をまったく使用しないなど)。

ありがとう。

4

1 に答える 1

1

AbstractPositioningDropControllerさて、私は(の親) をオーバーライドしFlowPanelDropController、いくつかの追加機能を追加することになりました。

1)newPositioner()メソッドは、幅、高さ、および装飾が小さい垂直スペースである Label を作成するようになりました。このウィジェットの要素には定数id("POSITIONER" など) があります。これは、複数のドロップ ターゲット上でドラッグ オブジェクトをナビゲートする際に複数のポジショナーを使用する予定がある場合に、複数のポジショナーを区別するのに役立ちます。また、いくつかのtransitionCSS 効果が Label に適用され、Label の幅のアニメーション拡張を処理します。

2）onEnter()私は次のことをします

        ...
        removePositioner(getPositionerElement());

        Widget positioner = newPositioner();
        dropTarget.insert(positioner, targetIndex);
        animatePositionerExtension();

getPositionerElement()戻る場所DOM.getElementById(POSITIONER)

同時に、removePositioner(..)この要素の ID を抽象的なものにリセットし、理想的には を呼び出す前に何らかのアニメーションを提供する必要があります.removeFromParent()。しかし、これを適切にデバッグするのに十分な時間がなかったため、アニメーションなしで古いポジショナーを削除することになりました。

メソッドanimatePositionerExtension()にはポジショナー ウィジェットの幅を変更するコードが含まれているため、CSSはそれtransitionをキャッチしてアニメーションを提供します。

クラス内のポジショナー ウィジェットへのすべてのアクセスは、更新されたメソッドを通じて提供する必要があります。

3)onLeave()行を含むremovePositioner(getPositionerElement());

4) の最後にonMove()、いくつかの行を追加しました:

     galleryWidget.extendHoveredRow(targetIndex - 1);
     animatePositionerExtension();

extendHoveredRow(hoveredWidgetOrdinal)単一行でスライド効果を「制限」するロジックを実装した場所:

int rowHovered = -1;
public void extendHoveredRow(int hoveredWidgetOrdinal) {
    int newRowHovered = getRowByOrdinalHovered(hoveredWidgetOrdinal);
    if (rowHovered != newRowHovered) {
        // adjust position of items in the previously hovered row
        int firstInPreviouslyHoveredRow = (rowHovered - 1) * itemsInARow;
        shiftFirstItemLeft(firstInPreviouslyHoveredRow, false);

        rowHovered = newRowHovered;
        // extend this row
        int firstInThisRow = getOrdinalFirstInThisRowByOrdinal(hoveredWidgetOrdinal);
        shiftFirstItemLeft(firstInThisRow, true);
    }
}

これは要するに、私がそのことをした方法です。また、アニメーションの削除を追加するなど、まだ改善の余地があります。

ここでも、DropController をオーバーライドし、「ギャラリー」ウィジェット内の要素を操作することがすべてです。このアプローチの利点は、gwt-dnd 操作フレームワークにとどまり、既存のコードの束を再利用したことです。

いくつかのメモ:

  • CSStransitionは 9 より前の IE ではサポートされていませんが、これはこのトピックとは関係ありません。
  • dragProxy のフェイスとして使用する場合は、Image ウィジェットの上に透明な「ガラス」div を配置します。draggableこれにより、要素を false に設定したり、別の場所を呼び出しevent.preventDefault()たり、他の回避策が 1 つまたは複数のブラウザーで機能せず、dragProxy ウィジェット全体ではなく画像自体がドラッグされている理由を理解しようとする時間を大幅に節約できます。
于 2013-04-23T18:54:41.623 に答える