-
-
Save mattheworiordan/1073811 to your computer and use it in GitHub Desktop.
var circle = Titanium.UI.createView({ | |
height:200, | |
width:200, | |
borderRadius:50, | |
backgroundColor:'#336699', | |
top:10, | |
left:50 | |
}); | |
currentWindow.add(circle); | |
// object to store last event position | |
var touchMoveBase = { | |
set: function(point) { | |
this.x = point.x; | |
this.y = point.y; | |
} | |
} | |
// circle position before it has been animated | |
var circlePosition = { top: circle.top, left: circle.left }; | |
circle.addEventListener('touchstart', function(e) { | |
Titanium.API.info('Touch start: ' + JSON.stringify(e)); | |
// get absolute position at start | |
touchMoveBase.set(e.globalPoint); | |
}); | |
circle.addEventListener('touchmove', function(e) { | |
Titanium.API.info('Moving: ' + JSON.stringify(e)); | |
// update the co-ordinates based on movement since last movement or touch start | |
circlePosition.top += e.globalPoint.y - touchMoveBase.y; | |
circlePosition.left += e.globalPoint.x - touchMoveBase.x; | |
circle.animate({ | |
top: circlePosition.top, | |
left: circlePosition.left, | |
duration: 1 | |
}); | |
// reset absolute position to current position so next event will be relative to current position | |
touchMoveBase.set(e.globalPoint); | |
}); | |
circle.addEventListener('touchend', function(e) { | |
Titanium.API.info('Stop drag: ' + JSON.stringify(e)); | |
}); |
slavikofmosonyi How you make it ?
Here is perfect solutions for all devices
var circle = Ti.UI.createView({
height:300,
backgroundColor: 'red',
width:250
});
$.win.add(circle);
var item1 = Ti.UI.createImageView({
top:'0',
id:'item1',
//left:'0',
width:'50',
height:'50',
zIndex:'1',
backgroundColor:'green',
image:'/burger_menu.png'
});
circle.add(item1);
var wth = item1.getWidth()/2;
var hgt = item1.getHeight()/2;
item1.addEventListener('touchmove', function(e) {
touchMove(item1 , e);
});
function touchMove(obj , e)
{
var convertedPoint = obj.convertPointToView({x: e.x, y: e.y}, circle);
if(convertedPoint != null)
{
item1.animate({
left: Math.round(convertedPoint.x/Ti.Platform.displayCaps.logicalDensityFactor) - wth,
top: Math.round(convertedPoint.y/Ti.Platform.displayCaps.logicalDensityFactor) - hgt ,
duration: 1
});
}
}
$.win.open();
Hi
How I can drag and drop images in appcelerator? or
How I can much some images together in appcelerator?
Here is perfect solutions for all devices
let circle = Ti.UI.createView({
width: 250,
height: 300,
backgroundColor: 'red'
})
$.win.add(circle)
let item1 = Ti.UI.createImageView({
top: 0,
left: 0,
zIndex: 1,
width: 50,
height: 50,
backgroundColor: 'green',
image: '/burger_menu.png'
})
circle.add(item1)
let wth = item1.getWidth() / 2
let hgt = item1.getHeight() / 2
item1.addEventListener('touchmove', e => touchMove(item1, e))
function touchMove(obj, e) {
let convertedPoint = obj.convertPointToView({ x: e.x, y: e.y }, circle)
if (convertedPoint != null) {
item1.animate({
duration: 1,
top: Math.round(convertedPoint.y / Ti.Platform.displayCaps.logicalDensityFactor) - hgt,
left: Math.round(convertedPoint.x / Ti.Platform.displayCaps.logicalDensityFactor) - wth,
})
}
}
$.win.open()
This really help me, thanks!
With minor tweaks, I was able to turn it into an Alloy module!
I did it as your codes. but there's a problem.
The value of 'circlePosition' will be increased more and more when you move the circle.
So I did it in my own way.