2

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

我希望这个定位器是定义宽度的空白空间，具有挑战性的是在添加和移除定位器时实现滑动动画效果。如果您是桌面 Picasa 应用程序用户，您就会明白我的意思：目标行向两侧滑动（向左一点，向右一点），扩大了您要放置照片的项目之间的空间。

整个事情已经足够复杂了，但是任何与如何应用定位器附加/分离动画相关的帮助都值得赞赏。如果您对这有什么帮助有任何想法，也许我需要使用不同的方法（例如，使用 GWT 本机 dnd 而不是 gwt-dnd lib，并且根本没有“定位器”）。

谢谢。

4

1 回答 1

1

好吧，我最终覆盖了AbstractPositioningDropController(parent of FlowPanelDropController) 并添加了一些额外的功能。

1)newPositioner()方法现在构建标签，这是一个垂直空间，具有一些小的宽度、高度和装饰。此小部件的元素具有常量id（例如，“POSITIONER”），如果您计划在多个放置目标上使用拖动对象导航时使用多个定位器，这有助于区分多个定位器。一些transitionCSS 效果也被应用到标签上，这将负责处理标签宽度的动画扩展。

2）在onEnter()我做以下

        ...
        removePositioner(getPositionerElement());

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

在哪里getPositionerElement()返回DOM.getElementById(POSITIONER)

同时removePositioner(..)将此元素的 id 重置为抽象的东西，理想情况下应该在调用之前提供一些动画.removeFromParent()。但是我没有足够的时间来正确调试它，所以最终只是移除了没有动画的旧定位器。

方法animatePositionerExtension()包含更改定位器小部件宽度的代码，以便 CSStransition捕获并提供动画。

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

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 操作框架中，并且还重用了一堆现有的代码。

一些注意事项：

  • IE pre-9 不支持CSS transition，但这与本主题无关。
  • 如果您将其用作 dragProxy 的面，则在 Image 小部件的顶部放置一个透明的“玻璃”div。这将为您节省大量时间来尝试理解为什么将元素设置draggable为 false，或调用event.preventDefault()其他地方，或其他解决方法在一个或多个浏览器中不起作用，并且图像本身被拖动而不是整个 dragProxy 小部件。
于 2013-04-23T18:54:41.623 回答