Question

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

我在我的应用程序的不同模块中都有一个CellTable和一个CellTree（我正在使用GWTP，所以一切都是分离的）。这些小部件都不允许相互了解，它们只接受draggables / droppables，检查基础数据类型，然后适当地处理它们。

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

这里存在问题，到目前为止我没有找到提供此功能的方法，因为setOnDrag（）方法没有告诉我有关检测到的droppables的任何信息，而setOnOver只在第一次遇到droppable时触发一次。

据我所知，这给我留下了两个选择：

1。）添加额外的＆＃34;隐形＆＃34;进入我的CellTree的节点，它们也可以放置并放在我的其他节点之间。 2.）实现一些自定义事件处理程序，我在拖动开始之前将其附加到可拖动的帮助程序，并用于在可拖动实际位于可放置对象之后比较帮助程序和droppable的位置。

选项1确实令人讨厌，因为它严重破坏了我的CellTree设计，并可能对效率造成很大影响。

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

所以我希望有一个我可能没有的选项3，任何帮助都会非常感激。

干杯，

凯西

Answer 1

我想我找到了一个解决方案，虽然它可能不是最好的，但它现在对我有用。在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");
                }
            }
        }
    });

这种方式使用了几个全局变量，但它似乎是我发现的最佳方法，因为拖动选项不包含有关droppable元素的信息。并且您必须添加逻辑以了解它是在之前/之后/或之前被删除并且在那时执行您想要的操作。

GWTQuery拖放 - 在单元树中的节点之间拖动

1 个答案: