使用gwt dnd生成有序列表小部件

我试图生成一个有序的小部件列表。 我的目标是制作一个菜单生成器，我试着以此为例，得到一个包含列和元素的二维数组。 例如：

MenuItem//ui包含：id、标签、url、顺序、列表MenuItem子项

___________________________________________________________________________________________ | 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，列可拖动|菜单项顺序1 coldrag |等 | | | | ______________________________________ | _____________________________ | ||菜单项订单0，可拖动项目| |菜单项订单0 || | | | | | | | | | | | | | | | |____________________________________| | |___________________________| | | | | | | | | | | | ______________________________________ | | ||菜单项订单1，可拖动项目| || | | | | | | | | | | | |____________________________________| | | | | | | | | | | | | ______________________________________ | | ||菜单项订单2，可拖动项目| || | | | | | | | | | | | |____________________________________| | | | | | 问题是我不知道如何将顺序应用于每个项目并生成一个包含结果的数组。

---

看看你是否能帮我，谢谢。

我创建了一些与此非常类似的东西，但我使用了由julien drameaux编写的gwtquery的dnd插件。我创建了一些与您使用的非常相似的东西。请记住，gwtquery是jquery的gwt端口，不使用外部js文件，也不包装另一个js库。它是非常快速和高效的。我在过去使用过gwt dnd，但发现gwtquery dnd插件对于像CellWidgets这样的较新小部件要好得多

我首先使用了portlet示例，该示例非常简单，随后对其进行了扩展

下面是portlet示例以及其他示例

这是非常好的文档

顺便说一句，这里是我的示例，它使用了允许排序的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;
    }
}

public类EditableDNDCellList扩展复合实现IsEditor{
私有类DropHandler实现DropEventHandler、OverdropableEventHandler、OutDroppableEventHandler、DragEventHandler、DragStartEventHandler、DragStopEventHandler{
私家车；
//放置在位置保持架的单元格中
私有int占位符位置=0；
//占位符正好插入此元素之前
私有元素插入点；
专用GQuery占位符=$（“”）；
公共DropHandler（）{
css（css.BACKGROUND_COLOR.with（RGBColor.rgb（“#B5D5FF”））；
css（css.BORDER.with（Length.px（1）、BorderStyle.虚线、RGBColor.BLACK））；
css（css.WIDTH.with（Length.pct（100））；
}
@凌驾
公共站点（DragStopEvent事件）{
元素draggedCell=event.getDraggable（）；
$（draggedCell.css（css.DISPLAY.with（DISPLAY.BLOCK））；
}
@凌驾
公共启动（DragStartEvent事件）{
元素draggedCell=event.getDraggable（）；
$（draggedCell.css（css.DISPLAY.with（DISPLAY.NONE））；
}
@凌驾
公共无效onDrag（DrageEvent事件）{
如果（结束）{
maybeMovePlaceHolder（event.getHelper（））；
}
}
@凌驾
公共无效OnOutDropable（OutDroppableEvent事件）{
重置（）；
}
@凌驾
公共无效不可撤销（可透支事件）{
元素dragHelper=event.getDragHelper（）；
元素draggingCell=event.getDraggable（）；
T operation=event.getDroppableData（）；
占位符.height（$（dragHelper.height（））；
//将占位符附着在拖动单元格的正前方
insertPoint=拖动单元；
Placeholder Position=cellList.getVisibleItems（）.indexOf（操作）；
移动占位符（）；
//启用拖动时侦听事件
isHover=true；
}
@凌驾
公共无效onDrop（DropEvent事件）{
T operation=event.getDragableData（）；
asEditor（）.getList（）.remove（操作）；
asEditor（）.getList（）.add（占位符位置，操作）；
//asEditor（）.getList（）.set（占位符位置，操作）；
重置（）；
}
/**
*重置此对象的状态
*/
私有无效重置（）{
isHover=false；
//拆下位置保持架
占位符.remove（）；
插入