0

我正在使用出色的 GWTQuery 库向我的 GWT 单元小部件添加拖放支持。

我的应用程序的不同模块中有一个 CellTable 和一个 CellTree（我使用的是 GWTP，所以一切都是解耦的）。这些小部件都不允许相互了解，它们只是接受可拖动/可放置，检查底层数据类型，然后适当地处理它们。

我遇到的问题是我需要支持在我的单元格树节点之间拖动。IE：典型的功能，如果你直接拖动到树中的一个元素上，它会落入那个元素，但是如果你稍微低于或高于，你会得到一个视觉指示器（通常是一条水平线），向用户指示他们也可以在节点之间拖动当前项目。

问题就在这里，到目前为止，我还没有找到提供此功能的方法，因为 setOnDrag() 方法没有告诉我任何有关检测到的可放置对象的信息，并且 setOnOver 仅在第一次遇到可放置对象时触发一次。

据我所知，这让我只有两个选择：

1.) 在我的 CellTree 中添加额外的“不可见”节点，这些节点也是可放置的，位于我的其他节点之间。2.) 实现一些自定义事件处理程序，我在拖动开始之前将其附加到可拖动的助手，并在可拖动对象实际位于可放置对象上方时用于比较助手和可放置对象的位置。

选项 1 确实令人讨厌，因为它严重破坏了我的 CellTree 设计，并且可能对效率产生非常严重的影响。

选项 2 确实令人讨厌，因为它需要大量额外的代码和技巧才能使其正常工作。

所以我希望有一个我可能没有的选项 3，任何帮助将不胜感激。

干杯，

凯西

4

1 回答 1

0

我想我已经找到了一个解决方案，虽然它可能不是最好的，但它目前对我有用。在 setOnDrag 方法中，我确定项目被拖动到哪里，我可以在元素之前或之后添加一行，或者在元素上放置一些 css 以表示我正在将拖动的项目放在顶部。我创建了一个 GQuery 占位符来显示前/后行，并在带有 css 的元素周围放置一个边框以放在顶部。

要知道我要放在哪个元素上，我在 setOnOver 方法中设置了一个全局变量。这是一个简单的模型：

private GQuery placeHolder = $("<div id='cellPlaceHolder' style=' outline: thin dashed #B5D5FF; height: 2px; background:#B5D5FF;'></div> ");
private Element oldEl = null;

options.setOnOver(new DroppableFunction() {
    @Override
    public void f(DragAndDropContext context) {
       oldEl = context.getDroppable();
    }
});

options.setOnDrag(new DragFunction() {

        @Override
        public void f(DragContext context) {
            if (oldEl != null) {
                int difference = Math.abs(oldEl.getAbsoluteTop() - context.getHelperPosition().top);

                if (difference > 0 && difference < 16) {
                    /* dragging on top edge, so insert place holder */
                    oldEl.getFirstChildElement().getStyle().clearProperty("border");
                    placeHolder.insertBefore(oldEl.getFirstChildElement());
                } else if (difference > 26 && difference < 53) {
                    /* dragging on bottom edge, so insert place holder */
                    oldEl.getFirstChildElement().getStyle().clearProperty("border");
                    placeHolder.insertAfter(oldEl.getFirstChildElement());
                }else if (difference > 15 && difference < 27) {
                    /* dragging in middle so add border */
                    placeHolder.remove();
                    oldEl.getFirstChildElement().getStyle().setProperty("border", "2px solid red");
                }
            }
        }
    });

这种方式使用了几个全局变量，但它似乎是我发现的最好的方法，因为拖动选项不包括有关可放置元素的信息。而且您必须添加逻辑以了解它是否在之前/之后/或之后被丢弃，并在那时用它做您想做的事情。

于 2013-09-09T21:04:08.893 回答