Skip to content

Instantly share code, notes, and snippets.

@mcongrove
Created April 1, 2011 22:13
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mcongrove/898963 to your computer and use it in GitHub Desktop.
Save mcongrove/898963 to your computer and use it in GitHub Desktop.
A quick and simple example of how to do drag+drop in Titanium
Ti.include("TiDrop.js");
var tabGroup = Ti.UI.createTabGroup();
var window = Ti.UI.createWindow({
title: "Drag + Drop",
backgroundColor: "#FFF"
});
var tab = Ti.UI.createTab({
title: "Drag + Drop",
window: window
});
var box1 = Ti.UI.createView({
width: 100,
height: 100,
top: 10,
left: 10,
backgroundColor: "#7A0000"
});
var box2 = Ti.UI.createView({
width: 100,
height: 100,
top: 10,
left: 120,
backgroundColor: "#007A00"
});
var container1 = Ti.UI.createView({
width: 300,
height: 120,
top: 237,
left: 10,
backgroundColor: "#CCC",
items: 0
});
function yay(e) {
if(e.contained) {
e.source.top = 247;
e.source.left = 20;
}
}
TiDrop.init(box1, container1, yay);
TiDrop.init(box2, container1, yay);
window.add(container1);
window.add(box1);
window.add(box2);
tabGroup.addTab(tab);
tabGroup.open();
var TiDrop = {
touching: false,
position: {
elementYStart: 0,
elementXStart: 0,
yStart: 0,
xStart: 0,
yCurrent: 0,
xCurrent: 0
},
init: function(_element, _container, _callback) {
_element.addEventListener("touchstart", function(e) { TiDrop.touchHandler(e); }, false );
_element.addEventListener("touchmove", function(e) { TiDrop.touchHandler(e); }, false );
_element.addEventListener("touchend", function(e) { TiDrop.touchHandler(e); }, false );
_element.addEventListener("touchcancel", function(e) { TiDrop.touchHandler(e); }, false );
if(_container) {
this.container = _container;
}
if(_callback && typeof _callback == "function") {
this.callback = _callback;
} else {
this.callback = false;
}
},
touchHandler: function(_event) {
if(_event.type == "touchstart") {
this.touching = true;
this.element = _event.source;
this.position.elementYStart = this.element.top;
this.position.elementXStart = this.element.left;
this.position.yStart = parseInt(_event.globalPoint.y, 10);
this.position.xStart = parseInt(_event.globalPoint.x, 10);
} else if(_event.type == "touchmove") {
this.position.yCurrent = parseInt(_event.globalPoint.y, 10);
this.position.xCurrent = parseInt(_event.globalPoint.x, 10);
var yDistance = this.position.yCurrent - this.position.yStart;
var xDistance = this.position.xCurrent - this.position.xStart;
_event.source.top = this.position.elementYStart + yDistance;
_event.source.left = this.position.elementXStart + xDistance;
} else if(_event.type == "touchend" || _event.type == "touchcancel") {
if(this.callback) {
var _data = {
source: this.element,
position: {
y: this.position.yCurrent,
x: this.position.xCurrent
},
contained: this.withinContainer()
};
this.callback(_data);
}
this.element = null;
this.touching = false;
this.position = {
elementYStart: 0,
elementXStart: 0,
yStart: 0,
xStart: 0,
yCurrent: 0,
xCurrent: 0
};
} else {
Ti.API.info("TiDrop: Not a valid touch event");
}
},
withinContainer: function() {
var contained = true;
if(this.container) {
if(this.element.left < this.container.left) { contained = false; }
if(this.element.left > this.container.left + this.container.width) { contained = false; }
if(this.element.left + this.element.width > this.container.left + this.container.width) { contained = false; }
if(this.element.top < this.container.top) { contained = false; }
if(this.element.top > this.container.top + this.container.height) { contained = false; }
if(this.element.top + this.element.height > this.container.top + this.container.height) { contained = false; }
} else {
contained = false;
}
return contained;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment