GWT拖放动画

我有一个流程面板，其中包含许多照片小部件（画廊中有随机行数和列数，取决于屏幕大小），我想实现拖放行为以改变它们的顺序。我正在使用gwt-dnd库。它的FlowPanelDropController允许你定义你自己的定位器（分隔符），它显示了拖放被拖动的控件的候选位置。GWT拖放动画

我希望这个定位器成为具有定义宽度的空白空间，而具有挑战性的是为添加和删除定位器时的滑动动画效果。如果您是桌面版Picasa应用用户，则您知道我的意思：目标行在两侧（向左一点，向右一点）滑动，以便在要放置照片的项目之间扩展空间。

整个事情已经足够复杂了，但是对于如何应用定位器attach/detach动画相关的帮助表示赞赏。也许我需要使用不同的方法（例如，如果你有任何想法，这可能会有所帮助，例如，使用GWT本机dnd而不是gwt-dnd lib，并且根本不需要“定位器”）。

谢谢。

来源

2013-04-03 alexp

你可能在jQuery中尝试一些东西，然后使用GwtQuery将其移植。 – SSR 2013-04-04 16:14:32

那么，我最终重写了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小部件。

来源

2013-04-23 18:54:41 alexp

GWT拖放动画

回答

相关问题