我正在尝试生成一个有序的小部件列表。 我的目标是创建一个菜单构建器gwt-dnd，我试图将其作为示例https://gwt-dnd.appspot.com/#InsertPanelExample，我得到一个包含它们包含的列和元素的二维数组。 例如：
MenuItem // ui包含：id，label，url，order，List MenuItem childrenrens
___________________________________________________________________________________________ | Menu Item order 0, column draggable | Menu item order 1 coldrag | etc | | | | ______________________________________ | _____________________________ | | | MenuItem order 0, item draggable | | | MenuItem order 0 | | | | | | | | | | | | | | | | | |____________________________________| | |___________________________| | | | | | | | | | | | ______________________________________ | | | | MenuItem order 1, item draggable | | | | | | | | | | | | | | |____________________________________| | | | | | | | | | | | | ______________________________________ | | | | MenuItem order 2, item draggable | | | | | | | | | | | | | | |____________________________________| | | | | |
问题是我不知道如何将订单应用于每个项目并生成带有结果的数组。 看看你是否可以帮助我，谢谢。
答案 0 :(得分：0)
我创造了与此非常相似的东西，但我使用了julien drameaux编写的gwtquery的dnd插件。我创造了一些非常类似于你正在使用的东西。请记住，gwtquery是jquery的gwt端口，不使用外部js文件，也不包装另一个js库。它非常快速有效。我过去使用过gwt-dnd，但发现gwtquery-dnd插件对于像CellWidgets这样的新小部件来说要好得多。
我使用portlet示例开始时非常简单，稍后会对其进行扩展。
这是portlet示例以及其他示例。
这是非常好的文档。
BTW这是我的示例，它使用允许排序的portlet的修改版本。它也是一个编辑器，因此我可以使用gwt编辑器框架来刷新小部件。
public class EditableDNDCellList<T> extends Composite implements IsEditor<HasDataEditor<T>> {
private class DropHandler implements DropEventHandler, OverDroppableEventHandler, OutDroppableEventHandler, DragEventHandler, DragStartEventHandler, DragStopEventHandler {
private boolean isHover;
// position in the cell of the place holder
private int placeHolderPosition = 0;
// the place holder is inserted just before this element
private Element insertPoint;
private GQuery placeHolder = $("<div id='cellPlaceHolder'></div>");
public DropHandler() {
placeHolder.css(CSS.BACKGROUND_COLOR.with(RGBColor.rgb("#B5D5FF")));
placeHolder.css(CSS.BORDER.with(Length.px(1), BorderStyle.DASHED, RGBColor.BLACK));
placeHolder.css(CSS.WIDTH.with(Length.pct(100)));
}
@Override
public void onDragStop(DragStopEvent event) {
Element draggedCell = event.getDraggable();
$(draggedCell).css(CSS.DISPLAY.with(Display.BLOCK));
}
@Override
public void onDragStart(DragStartEvent event) {
Element draggedCell = event.getDraggable();
$(draggedCell).css(CSS.DISPLAY.with(Display.NONE));
}
@Override
public void onDrag(DragEvent event) {
if (isHover) {
maybeMovePlaceHolder(event.getHelper());
}
}
@Override
public void onOutDroppable(OutDroppableEvent event) {
reset();
}
@Override
public void onOverDroppable(OverDroppableEvent event) {
Element dragHelper = event.getDragHelper();
Element draggingCell = event.getDraggable();
T operation = event.getDroppableData();
placeHolder.height($(dragHelper).height());
// attach the placeholder just before the dragging cell
insertPoint = draggingCell;
placeHolderPosition = cellList.getVisibleItems().indexOf(operation);
movePlaceHolder();
// enable listening on drag event
isHover = true;
}
@Override
public void onDrop(DropEvent event) {
T operation = event.getDraggableData();
asEditor().getList().remove(operation);
asEditor().getList().add(placeHolderPosition, operation);
//asEditor().getList().set(placeHolderPosition, operation);
reset();
}
/**
* reset the state of this object
*/
private void reset() {
isHover = false;
// remove the place holder
placeHolder.remove();
insertPoint = null;
}
/**
* Check if we have to move the place holder
*
* @param draggableHelper
*/
private void maybeMovePlaceHolder(Element draggableHelper) {
Element newCellAfterPlaceHolder = resolveCurrentInsertPoint(draggableHelper);
if (newCellAfterPlaceHolder != null && newCellAfterPlaceHolder.equals(insertPoint)) {
// placeHolder must not move
return;
}
insertPoint = newCellAfterPlaceHolder;
movePlaceHolder();
}
/**
* insert the place holder before the insertPoint element if this last
* is not null. Otherwise set the place holder at the end of the
* CellList
*/
private void movePlaceHolder() {
placeHolder.remove();
if (insertPoint != null) {
placeHolder.insertBefore(insertPoint);
} else {
GQuery allCells = $(".operationCell", cellList);
int last = allCells.elements().length;
// insert the place holder at the end
placeHolder.insertAfter(allCells.get(last));
//Window.alert("ADDED THE VALUE");
}
}
/**
* Return the first cell having its absolute top property just greater
* than drag helper. The place holder should be inserted just before
* this cell.
*
* @param draggableHelper
* @return
*/
private Element resolveCurrentInsertPoint(Element draggableHelper) {
GQuery allCells = $(".operationCell", cellList);
if (allCells.isEmpty()) {
// no cells, the placeholder should just be added in the begin
// of the cell
// list
return null;
}
// compare absoluteTop of the draggable with absoluteTop of all
// cells
int draggableAbsoluteTop = draggableHelper.getAbsoluteTop();
int i = 0;
for (Element cell : allCells.elements()) {
// workaround for issue 79
if ($(cell).parent().visible()) {
int cellAbsoluteTop = cell.getAbsoluteTop();
if (cellAbsoluteTop > draggableAbsoluteTop) {
placeHolderPosition = i;
return cell;
}
i++;
}
}
placeHolderPosition = i;
return null;
}
}
/**
* This is our editor used to edit our ScriptInputProxy classes.
*/
private HasDataEditor<T> editor = null;
private final DragAndDropCellList<T> cellList;
private AbsolutePanel container = new AbsolutePanel();
private DroppableWidget<DragAndDropCellList<T>> dropPanel;
private DropHandler dragHandler = new DropHandler();
public EditableDNDCellList(Cell<T> cell) {
initWidget(container);
cellList = new DragAndDropCellList<T>(cell);
dropPanel = new DroppableWidget<DragAndDropCellList<T>>(cellList);
DraggableOptions options = new DraggableOptions();
options.setHelper(HelperType.CLONE);
options.setAppendTo("body");
options.setOpacity(0.8f);
options.setCursor(Cursor.MOVE);
options.setAxis(AxisOption.Y_AXIS);
options.setRevert(RevertOption.ON_INVALID_DROP);
cellList.setDraggableOptions(options);
dropPanel.addOverDroppableHandler(dragHandler);
dropPanel.addOutDroppableHandler(dragHandler);
dropPanel.addDropHandler(dragHandler);
cellList.addDragHandler(dragHandler);
cellList.addDragStartHandler(dragHandler);
cellList.addDragStopHandler(dragHandler);
editor = HasDataEditor.of(cellList);
container.add(dropPanel);
}
public void setMaxListSize(int maxListSize) {
cellList.setPageSize(maxListSize);
}
@Override
public HasDataEditor<T> asEditor() {
return editor;
}
public CellList<T> getCellList() {
return cellList;
}
}