Titanium appcelerator drag view - titanium

Question

I want to drag a view verticaly inside my app, below is my code.
I have a window with id="win" and a square view (100x100).
var window = $.win;
var lastTouchPosition = 0;
$.demo.addEventListener("touchstart", function(e){
var touchPos = {x:e.x, y:e.y};
lastTouchPosition = $.demo.convertPointToView(touchPos, window);
});
$.demo.addEventListener("touchmove", function(e){
var touchPos = {x:e.x, y:e.y};
var newTouchPosition = $.demo.convertPointToView(touchPos, window);
$.demo.top += Number(newTouchPosition.y) - Number(lastTouchPosition.y);
$.demo.left += Number(newTouchPosition.x) - Number(lastTouchPosition.y);
//lastTouchPosition = newTouchPosition;
});
When i start drag the view i get following WARN : [WARN] : Invalid dimension value (nan) requested. Making the dimension undefined instead.
and my view is not moving.
Could you give me an idea please how i can start drag a view and stop to drag it when i reach a specific vertical position value (eg: the bottom of the viewport)
Thank you for your help.

Answer 1

I would add the touch events to the window/container-view instead like this:
var WIDTH = (OS_ANDROID) ? Ti.Platform.displayCaps.platformWidth / dpi : Ti.Platform.displayCaps.platformWidth;
var HEIGHT = (OS_ANDROID) ? Ti.Platform.displayCaps.platformHeight / dpi : Ti.Platform.displayCaps.platformHeight;
var sx = 0;
var sy = 0;
var cx = 0;
var cy = 0;
var xDistance = 0;
function onTouchStart(e) {
// start movement
sx = e.x;
sy = e.y;
cx = e.x;
cy = e.y;
}
function onTouchMove(e) {
xDistance = cx - sx;
var yDistance = cy - sy;
var rotationStrength = Math.min(xDistance / (WIDTH), 1);
var rotationStrengthY = Math.min(yDistance / (HEIGHT), 1);
var rotationAngel = (2 * Math.PI * rotationStrength / 16);
var scaleStrength = 1 - Math.abs(rotationStrength) / 16;
var scaleStrengthY = 1 - Math.abs(rotationStrengthY) / 16;
var scaleMax = Math.min(scaleStrength, scaleStrengthY);
var scale = Math.max(scaleMax, 0.93);
$.view_card_front.rotation = rotationAngel * 20;
$.view_card_front.translationX = xDistance;
$.view_card_front.setTranslationY(yDistance);
$.view_card_front.scaleX = scale;
$.view_card_front.scaleY = scale;
cx = e.x;
cy = e.y;
}
function onTouchEnd(e) {
// check xDistance
}
$.index.addEventListener("touchmove", onTouchMove);
$.index.addEventListener("touchstart", onTouchStart);
$.index.addEventListener("touchend", onTouchEnd);
in the XML there is a <View id="view_card_front"/> with touchEnabled:false
This will give you a nice smooth movent (and a rotation in this example)