A simple Drag, Drop and Resize for Titanium Mobile. (@Thedeejay92 - Mousta.ch )

gistfile1.js

/*
* I made this code for an upcoming hackaton, so, it's really, really ugly. Feel free
* to update it here so everyone will be able to use it correctly.
*
* It's pretty easy to understand, basicly the object you want to edit, an overlay,
* four handlers, and the background view.
*
* It's currently made for/tested on iPad 5.0 with Timob 2.0.2; works only in landscape.
*
* This code is under the Moustach licence. This means you can do whatever you want with
* this code, I'm not responsible for anything. The only condition, is that I ask you
* to add, somewhere in your app, a Moustach. Any size, anywhere, and if you are really
* nice, make it link to this website: Mousta.ch
*
* (Here is the link to the Moustach image : http://mousta.ch/moustach )
*
* If you contributed, add your name and modification below:
*
* @Thedeejay92 (Creator)
*
*/

var finalobj = {};


finalobj.container = Ti.UI.createView({width:Ti.UI.SIZE, height:Ti.UI.SIZE,top:20,left:20,t:"c",zIndex:1});

finalobj.object = Ti.UI.createWebView({
		width:150,
		height:100,
		url: "http://www.mousta.ch/"
});	


// This is required for my app, but you can add it directly to your object

object.object.touchEnabled = false;
object.object.type = "object";
object.object.top = 10;
object.object.left = 10;
object.object.right = 10;
object.object.bottom = 10;



finalobj.container.add(finalobj.object);

//The overlay

finalobj.overlay = Ti.UI.createView({top:10,left:10,bottom:10,right:10,
	backgroundImage:"images/ui/largestripes.png",
	opacity:0.2,
	width:150,
	height:100,
	backgroundRepeat:true,
	t:"o",
	zIndex:1000
});

finalobj.container.add(finalobj.overlay);

//The grips

finalobj.grips = {};

// t is the type of the object, p his position. I have inverted E and W, so remember it when editing this code

finalobj.grips.N = Ti.UI.createImageView({image:"images/ui/grip.png", top:0, p:"N",t:"g",zIndex:1000});
finalobj.grips.E = Ti.UI.createImageView({image:"images/ui/grip.png", left:0, p:"E",t:"g",zIndex:1000});
finalobj.grips.W = Ti.UI.createImageView({image:"images/ui/grip.png", right:0, p:"W",t:"g",zIndex:1000});
finalobj.grips.S = Ti.UI.createImageView({image:"images/ui/grip.png", bottom:0, p:"S",t:"g",zIndex:1000});

finalobj.container.add(finalobj.grips.N);
finalobj.container.add(finalobj.grips.E);
finalobj.container.add(finalobj.grips.W);
finalobj.container.add(finalobj.grips.S);



finalobj.grips.show = function(){
	finalobj.grips.N.show();
	finalobj.grips.E.show();
	finalobj.grips.W.show();
	finalobj.grips.S.show();
};

finalobj.grips.hide = function(){
	finalobj.grips.N.hide();
	finalobj.grips.E.hide();
	finalobj.grips.W.hide();
	finalobj.grips.S.hide();
};


//always useful

finalobj.select = function(){
	finalobj.grips.show();
	finalobj.overlay.show();
};

finalobj.deselect = function(){
	finalobj.grips.hide();
	finalobj.overlay.hide();
};



var s = {};
finalobj.container.addEventListener("touchstart",function(e){
	
	s.x = e.globalPoint.x;
	s.y = e.globalPoint.y;
	
	s.t = finalobj.container.top;
	s.l = finalobj.container.left;
	
	s.h = finalobj.object.height;
	s.w = finalobj.object.width;
	
	// Orientation hack
	s.p = (Titanium.UI.orientation == Titanium.UI.LANDSCAPE_LEFT) ? 1 : -1;
	
});

finalobj.container.addEventListener("touchmove",function(e){
	
	if(e.source.t == "o"){
		
		finalobj.container.top =s.p*(-s.x+e.globalPoint.x)+s.t;
		finalobj.container.left = s.p*(s.y-e.globalPoint.y)+s.l;
		
	}else if(e.source.t == "g"){
		
		switch (e.source.p){
	
		case "N":
			
			
				finalobj.container.top =s.p*(-s.x+e.globalPoint.x)+s.t;
				finalobj.object.height = Math.max(5,s.h +s.p*(s.x-e.globalPoint.x));
				finalobj.overlay.height = Math.max(5,s.h +s.p*(s.x-e.globalPoint.x));
			
			break;
			
		case "S":
			
			
				finalobj.object.height = Math.max(5,s.h -s.p*(s.x-e.globalPoint.x));
				finalobj.overlay.height = Math.max(5,s.h -s.p*(s.x-e.globalPoint.x));
				nut.info(s.h +" "+s.p+" "+s.x+" "+e.globalPoint.x)
		
			break;
			
		case "E":
			
			
				finalobj.container.left =s.l+s.p*(s.y-e.globalPoint.y);
				finalobj.object.width = Math.max(5,s.w -s.p*(s.y-e.globalPoint.y));
				finalobj.overlay.width = Math.max(5,s.w -s.p*(s.y-e.globalPoint.y));
			
			
			
			break;
			
		case "W":
			
			
				finalobj.object.width = Math.max(5,s.w +s.p*(s.y-e.globalPoint.y));
				finalobj.overlay.width = Math.max(5,s.w +s.p*(s.y-e.globalPoint.y));
			
			
			
			break;
				
		}
		
	}
	
	
});