GWTQuery拖放-在单元树中的节点之间拖动
我正在使用奇妙的GWTQuery库向我的GWT单元小部件添加拖放支持 我在应用程序的不同模块中有一个CellTable和一个CellTree（我使用的是GWTP，所以一切都是解耦的）。这两个小部件都不允许相互了解，它们只接受拖拽/拖放，检查底层数据类型，然后适当地处理它们 我遇到的问题是，我需要支持在我的单元树节点之间拖动。IE：典型的功能是，如果直接拖动到树中的某个元素上，该元素会掉落到该元素中，但如果拖动到略低于或略高于该元素的位置，则会显示一个可视指示器（通常是水平线），指示用户也可以在节点之间拖动当前项 问题就在这里，到目前为止，我还没有找到提供此功能的方法，因为setOnDrag（）方法没有告诉我任何有关检测到的可拖放对象的信息，并且setOnOver仅在第一次遇到可拖放对象时触发一次 据我所知，我只有两个选择： 1.）将额外的“不可见”节点添加到我的CellTree中，这些节点也可以拖放并位于其他节点之间。 2.）实现一些自定义事件处理程序，在开始拖动之前，我将其附加到可拖动的辅助对象，并在可拖动的辅助对象实际位于可拖放的辅助对象上时，使用该处理程序比较辅助对象和可拖放的位置 选项1确实令人讨厌，因为它严重破坏了我的CellTree设计，并可能严重影响效率 选项2确实令人讨厌，因为它需要大量额外的代码和黑客才能正常工作 所以我希望有一个选择3，我可能没有想到，任何帮助将不胜感激 干杯GWTQuery拖放-在单元树中的节点之间拖动,gwt,gwtp,gwtquery,Gwt,Gwtp,Gwtquery,我正在使用奇妙的GWTQuery库向我的GWT单元小部件添加拖放支持 我在应用程序的不同模块中有一个CellTable和一个CellTree（我使用的是GWTP，所以一切都是解耦的）。这两个小部件都不允许相互了解，它们只接受拖拽/拖放，检查底层数据类型，然后适当地处理它们 我遇到的问题是，我需要支持在我的单元树节点之间拖动。IE：典型的功能是，如果直接拖动到树中的某个元素上，该元素会掉落到该元素中，但如果拖动到略低于或略高于该元素的位置，则会显示一个可视指示器（通常是水平线），指示用户也可以在节
凯西我想我已经找到了一个解决方案，虽然它可能不是最好的，但目前它对我很有效。在setOnDrag方法中，我确定将项目拖动到何处，此时我可以在元素之前或之后添加一行，或者在元素上放置一些css，以指示将拖动的项目拖放到顶部。我创建了一个GQuery占位符来显示before/after行，并用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");
}
}
}
});
private GQuery占位符=$（“”）；
私有元素oldEl=null；
options.setOnOver（新的DroppableFunction（）{
@凌驾
公共void f（DragAndDropContext上下文）{
oldEl=context.getDroppable（）；
}
});
options.setOnDrag（新的DragFunction（）{
@凌驾
公共void f（DragContext上下文）{
if（oldEl！=null）{
int difference=Math.abs（oldEl.getAbsoluteTop（）-context.getHelperPosition（）.top）；
如果（差值>0&&差值<16）{
/*在顶部边缘拖动，以便插入定位器*/
oldEl.getFirstChildElement（）.getStyle（）.clearProperty（“边框”）；
占位符.insertBefore（oldEl.getFirstChildElement（））；
}否则如果（差异>26和差异<53）{
/*在底部边缘拖动，以便插入定位器*/
oldEl.getFirstChildElement（）.getStyle（）.clearProperty（“边框”）；
占位符.insertAfter（oldEl.getFirstChildElement（））；
}否则如果（差异>15和差异<27）{
/*在中间拖动以添加边框*/
占位符.remove（）；
oldEl.getFirstChildElement（）.getStyle（）.setProperty（“边框”，“2px实心红色”）；
}
}
}
});