Android movement using touch doesn't work as expected.

Hi all I am having an issue on Android when I move a box on the screen using a touch.

I want the user to be able to touch a box, move their finger and have the box follow, and when they are done they lift their finger I want the box to snap back to where it was.

Currently this can happen, unless the user moves fast enough to be outside the view and they lift up.

Thanks for the help in advanced.

FYI: I am using the most recent master build of CI which allows the change of the zIndex during run-time after the view has been created and also access to convertPointToView.

Here is some extensive sample code:

var win = Ti.UI.createWindow({
    top:0,
    left:0,
    backgroundColor: 'black'
});
 
var center1 = {'x': 200, 'y':200};
var center2 = {'x': 550, 'y':200};
var center3 = {'x': 200, 'y':550};
var center4 = {'x': 550, 'y':550};
 
var zIndex = 1;
 
var background = Ti.UI.createView({
    backgroundColor:"#444444",
});
 
var view = Ti.UI.createView({
    backgroundColor:'red',
    center:center1,
    width:300,
    height:300,
    zIndex:zIndex,
    home:center1,
    favColor:'red'
});
 
var view2 = Ti.UI.createView({
    backgroundColor:'yellow',
    center:center2,
    width:300,
    height:300,
    zIndex:zIndex,
    home:center2,
    favColor:'yellow'
});
 
var view3 = Ti.UI.createView({
    backgroundColor:'green',
    center:center3,
    width:300,
    height:300,
    zIndex:zIndex,
    home:center3,
    favColor:'green'
});
 
var view4 = Ti.UI.createView({
    backgroundColor:'blue',
    center:center4,
    width:300,
    height:300,
    zIndex:zIndex,
    home:center4,
    favColor:'blue'
});
 
addEventListeners(view);
addEventListeners(view2);
addEventListeners(view3);
addEventListeners(view4);
 
function addEventListeners(aView) {
    aView.addEventListener('touchstart', TouchStartEventListener);
    aView.addEventListener('touchmove', TouchMoveEventListener);
    aView.addEventListener('touchend', TouchEndEventListener);
}
 
function TouchStartEventListener(e){
    var eventView = e.source;
    var bgPoint = eventView.convertPointToView(e, background);
 
    animateBoxMovement(eventView, {'x':bgPoint.x, 'y': bgPoint.y});
    //view.center = {'x':bgPoint.x, 'y': bgPoint.y};
    eventView.backgroundColor='purple';
    eventView.zIndex = zIndex + 1;
 
}
 
function TouchMoveEventListener(e){
    var eventView = e.source;
    var touchPnt = eventView.convertPointToView(e, background);
    animateBoxMovement(eventView, {'x':touchPnt.x, 'y': touchPnt.y}, 0);
    //view.center = {'x':touchPnt.x, 'y':touchPnt.y};
}
 
function TouchEndEventListener(e){
    var eventView = e.source;
    animateBoxMovement(eventView, eventView.home, 250);
    //view.center = center1;
    eventView.backgroundColor = eventView.favColor;
    eventView.zIndex = zIndex - 1;
}
 
 
 
function animateBoxMovement(view, newCenter, speed) {
    if (view == null || newCenter == null) {
        return;
    }
 
    if (speed == null) {
        speed = 1000;
    }
 
    var animation = Ti.UI.createAnimation({});
    animation.center = newCenter;
    animation.duration = speed;
    view.animate(animation);
}
 
win.add(background);
win.add(view);
win.add(view2);
win.add(view3);
win.add(view4);
 
win.open();

Try to set the touchmove animation speed to a very small value (10 ) to be able to follow the finger.

OR

Try to change the center (or top/left) properties of the dragged element on touchmove without animation and animate only the return to the initial position.