GWT拖放動畫

Question

我有一個流程面板，其中包含許多照片小部件（畫廊中有隨機行數和列數，取決於屏幕大小），我想實現拖放行爲以改變它們的順序。我正在使用gwt-dnd庫。它的FlowPanelDropController允許你定義你自己的定位器（分隔符），它顯示了拖放被拖動的控件的候選位置。

我希望這個定位器成爲具有定義寬度的空白空間，而具有挑戰性的是爲添加和刪除定位器時的滑動動畫效果。 如果您是桌面版Picasa應用用戶，則您知道我的意思：目標行在兩側（向左一點，向右一點）滑動，以便在要放置照片的項目之間擴展空間。

整個事情已經足夠複雜了，但是對於如何應用定位器attach/detach動畫相關的幫助表示讚賞。也許我需要使用不同的方法（例如，如果你有任何想法，這可能會有所幫助，例如，使用GWT本機dnd而不是gwt-dnd lib，並且根本不需要「定位器」）。

謝謝。

Answer 1

那麼，我最終重寫了AbstractPositioningDropController（FlowPanelDropController的父親）並添加了一些額外的功能。

1）newPositioner()方法現在建立標籤，這是垂直空間有一些小的寬度，高度和裝飾。這個小部件的元素具有不變的id（比如「POSITIONER」），如果您計劃在使用拖放對象在多個放置目標上進行導航時計劃放置其中的幾個，這有助於區分多個定位器。還有一些transition CSS效果被應用於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)實現的邏輯爲「限制」的滑動效果在單line：

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操作框架中，並重用了一堆現有的代碼。

一些注意事項：

• CSS transition沒有在IE前9支持，但這是無關 這個話題。
• 如果將 用作dragProxy的一個面，請在圖像小部件的頂部放置一個透明的「玻璃」div。這將爲您節省大量時間嘗試 瞭解爲什麼要麼將元素的draggable設置爲false，要麼 在其他地方調用event.preventDefault()，或者其他解決方法在一個或多個瀏覽器中不起作用，並且圖像本身被拖動而不是整個dragProxy小部件。