Continuously Reordering A List By Dragging

Question

I looked into drag and drop and found that the drop method of Container shuffles the containers components.

That brought me to ask myself: wouldn't it be nice if drop happened continously while keeping on dragging.

So I did just that - only it yields strange results. Apparently it gets into a state where the dragged component is not painted anymore and the dragFinished method of the dragged component is not called when releasing the pointer.

Please help me understanding what is going wrong there.

Here is the code:

public class FormContinuousDrop extends Form {
    private class LabelDraggable extends Label {
        int pressedX = 0;

        public LabelDraggable(String aCaption) {
            super(aCaption);
            setDraggable(true);
        }

        @Override
        public void pointerPressed(int x, int y) {
            super.pointerPressed(x, y);
            pressedX = x;
        }

        @Override
        public void pointerDragged(int x, int y) {
            Log.p("LabelDraggable.pointerDragged(" + x + ", " + y + ")");
            super.pointerDragged(pressedX, y);
            { // Here is where the "list" is shuffled whilst remaining dragging
                if (isDragActivated() && !getAnimationManager().isAnimating()) {
                    ContainerDropTarget containerDropTarget = (ContainerDropTarget) getParent();
                    containerDropTarget.drop(this, pressedX, getDraggedy());
                }
            }
        }

        @Override
        protected void dragFinished(int x, int y) {
            Log.p("LabelDraggable.dragFinished(" + x + ", " + y + ")");
            super.dragFinished(x, y);
        }
    }

    private class ContainerDropTarget extends Container {
        public ContainerDropTarget() {
            super(new BoxLayout(BoxLayout.Y_AXIS));
            setDropTarget(true);
        }

        @Override
        public Component getComponentAt(int x, int y) {
            boolean edt = Display.getInstance().isEdt();
            Log.p("ContainerDropTarget.getComponentAt(" + x + ", " + y + ") - EDT: " + String.valueOf(edt));
            return super.getComponentAt(x, y);
        }

        @Override
        public void drop(Component dragged, int x, int y) {
            Log.p("ContainerDropTarget.drop(" + x + ", " + y + ")");
            super.drop(dragged, x, y);
        }
    }

    public FormContinuousDrop() {
        setTitle("FormContinuousDrop");
        setScrollable(false);
        Container containerContent = getContentPane();
        containerContent.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        containerContent.add(new SpanLabel("Simple Drag And Drop example where drop is done continously whilst dragging"));
        ContainerDropTarget containerDropTarget = new ContainerDropTarget();
        for (int tally = 0; tally < 20; tally++) {
            containerDropTarget.add(new LabelDraggable("draggable " + (tally + 1)));
        }
        containerContent.add(containerDropTarget);
    }
}

Answer 1

Ok, what I tried to do cannot be done for now and for those reasons:

• The method com.codename1.ui.Container.drop(Component, int, int) indirectly causes the variable Form.dragged to be set to zero, which in turn causes the drag to be interrupted - see issue https://github.com/codenameone/CodenameOne/issues/1992
• If the method com.codename1.ui.AnimationManager.isAnimating() returns false this doesn't mean no animation is in progress - see issue https://github.com/codenameone/CodenameOne/issues/1993
• com.codename1.ui.Component.dragFinishedImpl(int, int) scrolls the drop target container using screen coordinates which often leads to strange results with scrollable containers - see issue https://github.com/codenameone/CodenameOne/issues/1994

It would be difficult to find workarounds for the mentioned things because often only private or package private access exists and Codename One does not support overshadowing of classes.

On the other hand, I do not feel familiar enough with Codename One to make the appropriate changes myself and post a pull request.

Answer 2

If you have some animation pending then the remove/add might create an animation and defer things like the removal/addition to prevent collision between multiple animations. You should always check the actual status of the component before adding/removing.