Moving Object with TouchMove

Question

Moving Object with TouchMove

You must Login before you can answer or comment on any questions.

var touchMoveBase = {
    set: function(point) {
            this.x = point.x;
            this.y = point.y;
        }
}
 
viewFoto.addEventListener('touchstart', function(e) {
    touchMoveBase.set(e.globalPoint);
});
 
viewFoto.addEventListener('touchmove', function(e) {
    viewFoto.top += e.globalPoint.y - touchMoveBase.y; 
        viewFoto.left += e.globalPoint.x - touchMoveBase.x;
 
        viewFoto.animate({
        top: viewFoto.top, 
            left: viewFoto.left,
            duration: 1 
    });
 
    touchMoveBase.set(e.globalPoint);
});

This is the code that I used to move my View with my finger... BUT it only move in X position.

Someone can help me?

Thanks

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

You are doing two things here : setting the top/left and animating them in the same time.

viewFoto.addEventListener('touchmove', function(e) {
    viewFoto.top += e.globalPoint.y - touchMoveBase.y; 
        viewFoto.left += e.globalPoint.x - touchMoveBase.x;
 
        viewFoto.animate({
        top: viewFoto.top, 
            left: viewFoto.left,
            duration: 1 
    });

try to remove the animation for the start and if this works , then use different variables like so:

viewFoto.addEventListener('touchmove', function(e) {
    new_top = e.globalPoint.y - touchMoveBase.y; 
     new_left = e.globalPoint.x - touchMoveBase.x;
 
        viewFoto.animate({
        top: new_top, 
            left:new_left,
            duration: 1 
    });

PS. not tested.

Answer 2

I'm going to guess that its because when you create your ImageView it looks something like this:

var viewFoto = Ti.UI.createImageView({
    image:'someimage.png',
    left:10
});

What happens is, the very first time you start to move, the viewFoto.top comes back as undefined, because you haven't set it. But the viewFoto.left comes back as 10 and allows you to move the image left and right. Specify a top property in your image and I'm sure it will work as expected.