app.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win1.add(label1);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win2.add(label2);



//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


// open tab group
tabGroup.open();


/////////////////////////// NATES CODE ////////////////////

var logTable = Ti.UI.createTableView({ borderRadius: 10, data: [], top: 10, width: 250, rowHeight: 30, right: 10});
logTable.height = 300;

var logToTable = function(txt){
	var row = Titanium.UI.createTableViewRow({});
	var view = Titanium.UI.createView({height: 20, width: 'auto', left: 0});
	var label = Titanium.UI.createLabel({
		text: txt, height:20, width: 'auto', left: 10,
		font: {fontSize: 10, fontFamily: 'Verdana'}
	});
	view.add(label);
	row.add(view);

	if( logTable.data.length > 0){
		logTable.insertRowBefore(0, row);
	}else{
		logTable.appendRow(row);
	}
};

var obj = Ti.UI.createView({
	top: 20,
	left: 20,
	height: 200,
	width: 200,
	zIndex: 2,
	backgroundColor: '#ccc',
	center: {x: 200, y: 200}
});

win1.add(obj);
win1.add(logTable);

var animationOffset = {};
obj.addEventListener('touchstart', function(e){
	animationOffset.log = [];
	animationOffset.screenHeight = win1.toImage().height;
	animationOffset.screenWidth = win1.toImage().width;
	animationOffset.startingPositionX = obj.center.x;
	animationOffset.startingPositionY = obj.center.y;
	
	animationOffset.x = e.x - obj.width/2;
	animationOffset.y = e.y -  obj.width/2;
	
	animationOffset.lastX = e.x + obj.animatedCenter.x - obj.width/2;
	animationOffset.lastY = e.y + obj.animatedCenter.y - obj.height/2;
	animationOffset.lastX = animationOffset.lastX - animationOffset.x;
	animationOffset.lastY = animationOffset.lastY - animationOffset.y;
	
	animationOffset.log.push('------');
	animationOffset.log.push('Start At: ' + obj.center.x + ', ' + obj.center.y);
});


obj.addEventListener('touchmove', function(e){
	animationOffset.log.push(obj.animatedCenter.x + ", " + obj.animatedCenter.y);
	var newX = e.x + obj.animatedCenter.x - obj.width/2;
	var newY = e.y + obj.animatedCenter.y - obj.height/2;
	newX = newX - animationOffset.x;
	newY = newY - animationOffset.y;

	var diffX = animationOffset.lastX - newX;
	var diffY = animationOffset.lastY - newY;
	if( diffX < 0 ){ diffX = diffX * -1; }
	if( diffY < 0 ){ diffY = diffY * -1; }
	
	if( (newX > animationOffset.screenWidth || newX < 0) || (newY > animationOffset.screenHeight || newY < 0) ){
		obj.fireEvent('touchcancel');
		return;
	}
	
	animationOffset.lastX = newX;
	animationOffset.lastY = newY;
	obj.animate({center:{x:newX,y:newY}, duration:0});
});

obj.addEventListener('touchcancel', function(){
	obj.animate({center:{x: animationOffset.startingPositionX, y: animationOffset.startingPositionY}, duration:3});
});

obj.addEventListener('touchend', function(e){
	Ti.API.notice('touchend');
	for(var i=0; i<animationOffset.log.length; i++){
		logToTable(animationOffset.log[i]);
	}
});