Question

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

我希望这个定位器是具有定义宽度的空白空间，并且具有挑战性的是为添加和移除定位器时实现滑动动画效果。如果您是桌面版Picasa应用用户，您就会知道我的意思：目标行向两侧滑动（从左到右，从右到右），扩展您要放置照片的项目之间的空间。

整个事情足够复杂，但是有关如何将动画应用于定位器连接/分离的任何帮助都表示赞赏。也许我需要使用不同的方法（例如，如果您有任何想法可以帮助它，请使用GWT本地dnd而不是gwt-dnd lib而不使用“定位器”）。

感谢。

Answer 1

好吧，我最终覆盖了AbstractPositioningDropController（{1}}的父级）并添加了一些额外的功能。

1）FlowPanelDropController方法现在构建Label，这是一个具有一些小宽度，高度和装饰的垂直空间。此小部件的元素具有常量newPositioner()（例如，＆＃34; POSITIONER＆＃34;），如果您计划在使用多个拖动对象导航时有多个定位器，则有助于区分多个定位器放下目标。此外，还有一些id CSS效果应用于标签，它将负责处理标签宽度的动画扩展。

2）在transition中，我执行以下操作

onEnter()

其中... removePositioner(getPositionerElement()); Widget positioner = newPositioner(); dropTarget.insert(positioner, targetIndex); animatePositionerExtension();返回getPositionerElement()

同时DOM.getElementById(POSITIONER)将此元素的id重置为抽象的内容，理想情况下应在调用removePositioner(..)之前提供一些动画。但是我没有足够的时间来正确调试这个，所以最终只是删除没有动画的旧定位器。

方法.removeFromParent()包含更改定位器窗口小部件宽度的代码，以便CSS animatePositionerExtension()能够捕获并提供动画。

应该通过更新的方法提供对班级中定位器小部件的所有访问。

3）transition包含第onLeave()行

4）在removePositioner(getPositionerElement());的末尾，我添加了几行：

onMove()

其中galleryWidget.extendHoveredRow(targetIndex - 1); animatePositionerExtension();将逻辑实现为＆＃34;限制＆＃34;单线滑动效果：

extendHoveredRow(hoveredWidgetOrdinal)

这就是我做的事情。还有一些改进空间，比如添加动画删除。

同样，所有关于使用＆＃34; gallery＆＃34;中的元素覆盖DropController和操作的全部内容。小部件。这种方法的好处是我仍然在gwt-dnd操作框架中，并且还重用了一堆现有的代码。

一些注意事项：

IE pre-9不支持CSS 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); } }，但这与此无关这个话题。
放一个透明的玻璃＆＃34;如果您使用它，则在Image小部件顶部使用div 作为dragProxy的一张脸。这将为您节省大量时间理解为什么要么将元素transition设置为false，要么将其设置为false 在其他地方调用draggable或其他解决方法无法在一个或多个浏览器中工作，并且正在拖动图像本身而不是整个dragProxy小部件。

GWT拖放动画

1 个答案: