Can't vertically drag a view in Android

Question

I'm working in Titanium SDK 3.1.1 and deploying to an Android 4.0 device. I'm trying to drag a View in any direction, but while the touchmove event is being fired, something goes wrong and the event is interrupted. The touchmove event works as long as I try a horizontal drag, if I try to drag the view in the y axis, the event is interrupted. The application doesn't crash nor the touchend event is fired. While looking at logcat I get the following:

D/InputEventConsistencyVerifier(11897): TouchEvent: ACTION_MOVE contained 1 pointers but there are currently 0 pointers down.
D/InputEventConsistencyVerifier(11897):   in android.view.ScaleGestureDetector@41223570
D/InputEventConsistencyVerifier(11897):   0: sent at 199051208557000, MotionEvent { action=ACTION_MOVE, id[0]=0, x[0]=214.55301, y[0]=163.79526, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x0, edgeFlags=0x0, pointerCount=1, historySize=1, eventTime=199051208, downTime=199051042, deviceId=2, source=0x1002 }
D/InputEventConsistencyVerifier(11897):   -- recent events --
D/InputEventConsistencyVerifier(11897):   1: sent at 199050732492000, MotionEvent { action=ACTION_UP, id[0]=0, x[0]=186.61124, y[0]=73.907616, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x80000000, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=199050732, downTime=199049818, deviceId=2, source=0x1002 }
D/InputEventConsistencyVerifier(11897):   2: sent at 199050713565000, MotionEvent { action=ACTION_MOVE, id[0]=0, x[0]=186.61124, y[0]=73.907616, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x80000000, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=199050713, downTime=199049818, deviceId=2, source=0x1002 }
D/InputEventConsistencyVerifier(11897):   3: sent at 199050693173000, MotionEvent { action=ACTION_MOVE, id[0]=0, x[0]=205.57172, y[0]=81.89763, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x80000000, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=199050693, downTime=199049818, deviceId=2, source=0x1002 }
D/InputEventConsistencyVerifier(11897):   4: sent at 199050683204000, MotionEvent { action=ACTION_MOVE, id[0]=0, x[0]=233.51352, y[0]=96.87891, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x80000000, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=199050683, downTime=199049818, deviceId=2, source=0x1002 }
D/InputEventConsistencyVerifier(11897):   5: sent at 199050669151000, MotionEvent { action=ACTION_MOVE, id[0]=0, x[0]=264.44907, y[0]=115.85519, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x80000000, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=199050669, downTime=199049818, deviceId=2, source=0x1002 }

I don't understand why is this happening, I've done drag & drops behaviours before in Android using Titanium and had not encountered this problem. This is the code for the touchstart, touchmove and touchend events:

var draggedView = Titanium.UI.createView({
        backgroundColor : 'transparent',
        width : circleWidth + 'dp',
        widthNumber : circleWidth,
        height : circleWidth + 'dp',
        heightNumber : circleWidth,
        left : '10dp',
        top : '10dp',
        leftNumber : 10,
        topNumber : 10,
        zIndex : 4,
    });
    var dragView = Titanium.UI.createView({
        backgroundColor : 'transparent',
        opacity : 1,
        width : circleWidth + 'dp',
        height : circleWidth + 'dp',
        widthNumber : circleWidth,
        heightNumber : circleWidth,
        left : '10dp',
        top : '20dp',
        leftNumber : 10,
        topNumber : 20,
        zIndex : 4
    });
    var targetView = Ti.UI.createImageView({
        image : imagesPath + "KineduPaperPlane.png",
        width : '100dp',
        widthNumber : 100,
        height : '100dp',
        heightNumber : 100,
        bottom : '-120dp',
        bottomNumber : -120
    });
    dragView.addEventListener('touchstart', function(e) {
        if (dragEnabled == true) {
            curX = e.x;
            curY = e.y;
        }
    });

    dragView.addEventListener('touchmove', function(e) {
        if (dragEnabled == true) {
            if (targetViewDisplayed == false) {
                targetView.animate({
                    bottom : '20dp',
                    duration : 200
                });
                targetView.bottomNumber = 20;
                targetViewDisplayed = true;
            }

            deltaX = e.x - curX;
            deltaY = e.y - curY;
            currentPositionX = initialViewX + deltaX;
            currentPositionY = initialViewY + deltaY;

            draggedView.setLeft(currentPositionX + 'dp');
            draggedView.leftNumber = currentPositionX;
            draggedView.setTop(currentPositionY + 'dp');
            draggedView.topNumber = currentPositionY;

        }
    });

    function recallControl() {
        var animateControlToOrigin = Ti.UI.createAnimation({
            left : initialViewX,
            top : initialViewY,
            duration : 300,
        });
        animateControlToOrigin.addEventListener("complete", function(e) {

            draggedView.setLeft(initialViewX + 'dp');
            draggedView.leftNumber = initialViewX;
            draggedView.setTop(initialViewY + 'dp');
            draggedView.topNumber = initialViewY;

            dragView.setLeft(initialViewX + 'dp');
            dragView.leftNumber = initialViewX;
            dragView.setTop(initialViewY + 'dp');
            dragView.topNumber = initialViewY;

        });

        draggedView.animate(animateControlToOrigin);
    }

    dragView.addEventListener("touchend", function(e) {
        if (dragEnabled == true) {

            if (targetViewDisplayed == true) {
                var leftLimit = true;
                var rightLimit = true;
                var topLimit = false;
                var lowerLimit = false;

                if (currentPositionY > (Ti.Platform.displayCaps.platformHeight - circleWidth - 100)) {
                    topLimit = true;
                }

                if (currentPositionY < Ti.Platform.displayCaps.platformHeight) {
                    lowerLimit = true;
                }

                if (leftLimit && rightLimit && topLimit && lowerLimit) {
                    var circleWidthAnimated = 20;

                    var animationLeft = (Ti.Platform.displayCaps.platformWidth / 2) - (circleWidth / 2);
                    var draggedViewAwayAnimation = Ti.UI.createAnimation({
                        left : animationLeft + 'dp',
                        height : circleWidthAnimated + 'dp',
                        width : circleWidthAnimated + 'dp',
                        borderRadius : circleWidthAnimated / 2,
                        opacity : 0,
                        duration : 400
                    })
                    draggedView.animate(draggedViewAwayAnimation);

                    var targetViewAwayAnimationPart2 = Ti.UI.createAnimation({
                        top : '10dp',
                        left : '-150dp',
                        duration : 1200,
                        opacity : 0,
                    });
                    draggedViewAwayAnimation.addEventListener("complete", function(e) {
                        targetView.animate(targetViewAwayAnimationPart1);
                        targetView.leftNumber = animationLeft;
                        targetView.heightNumber = circleWidthAnimated;
                        targetView.widthNumber = circleWidthAnimated;
                    });

                    var animationLeftPart1 = (Ti.Platform.displayCaps.platformWidth / 2) - circleWidthAnimated - (2) + 30;
                    var targetViewAwayAnimationPart1 = Ti.UI.createAnimation({
                        bottom : 0,
                        left : animationLeftPart1 + 'dp',
                        duration : 600,
                    });

                    targetViewAwayAnimationPart1.addEventListener("complete", function(e) {
                        targetView.animate(targetViewAwayAnimationPart2);
                        targetView.bottomNumber = 0;
                        targetView.leftNumber = animationLeftPart1;
                    });

                    targetViewAwayAnimationPart2.addEventListener("complete", function(e) {
                        dragEnabled = false;
                        targetView.leftNumber = -150;
                        targetView.top = 10;
                    });

                } else {

                    targetView.animate({
                        bottom : '-20dp',
                        duration : 200
                    });
                    targetView.bottomNumber = -20;
                    targetViewDisplayed = false;

                    recallControl();
                }
            }
        }
    });

The dragView is a transparent view I use to detect the touch events and the draggedView is the one being moved by the changes detected on those events. The targetView is the final destination for the draggedView.

Since I display views using dpi, I added some properties that contains the numerical values for properties like top, left, width, etc. If there's a way to work with dpi and arithmetical operations, I would be glad to be told how to do it.

Returning to my problem, I don't understand the reason for the touchmove event to stop. The message ACTION_MOVE contained 1 pointers but there are currently 0 pointers down gives me the impression that the finger tracking is lost during my try at vertically dragging the view.

Can someone direct in the issue at hand? What's is causing this behavior? Thanks for any help in advance.

Answer 1

did targetView stack on any view with horizontal scroll behavior?

i had the same issue before, mine is because i have a scrollview nested inside a scrollableview. i solve it via switching the scrollingEnabled to be true once at a time only, other to be false.

so i make a guess, it might because one of the view in the stack u have include inside the window have an horizontal scrolling enabled and causes when u scroll horizontally, the pointer doesnt know which view's event should goes to. check from window to targetView.

just a guess, hope it helps!