Titanium appcelerator drag view

Question

I want to drag a view verticaly inside my app, below is my code. I have a window with id="win" and a square view (100x100).

var window = $.win;
var lastTouchPosition = 0;
$.demo.addEventListener("touchstart", function(e){
    var touchPos = {x:e.x, y:e.y};
        lastTouchPosition = $.demo.convertPointToView(touchPos, window);
});

$.demo.addEventListener("touchmove", function(e){
    var touchPos = {x:e.x, y:e.y};
    var newTouchPosition = $.demo.convertPointToView(touchPos, window);

    $.demo.top += Number(newTouchPosition.y) -    Number(lastTouchPosition.y);
    $.demo.left +=  Number(newTouchPosition.x) - Number(lastTouchPosition.y);
    //lastTouchPosition = newTouchPosition;

});

When i start drag the view i get following WARN : [WARN] : Invalid dimension value (nan) requested. Making the dimension undefined instead. and my view is not moving. Could you give me an idea please how i can start drag a view and stop to drag it when i reach a specific vertical position value (eg: the bottom of the viewport)

Thank you for your help.

miga miga · Accepted Answer · 2017-01-28T13:49:55

I would add the touch events to the window/container-view instead like this:

var WIDTH = (OS_ANDROID) ? Ti.Platform.displayCaps.platformWidth / dpi : Ti.Platform.displayCaps.platformWidth;
var HEIGHT = (OS_ANDROID) ? Ti.Platform.displayCaps.platformHeight / dpi : Ti.Platform.displayCaps.platformHeight;
var sx = 0;
var sy = 0;
var cx = 0;
var cy = 0;
var xDistance = 0;

function onTouchStart(e) {
    // start movement
    sx = e.x;
    sy = e.y;
    cx = e.x;
    cy = e.y;
}

function onTouchMove(e) {
    xDistance = cx - sx;
    var yDistance = cy - sy;

    var rotationStrength = Math.min(xDistance / (WIDTH), 1);
    var rotationStrengthY = Math.min(yDistance / (HEIGHT), 1);

    var rotationAngel = (2 * Math.PI * rotationStrength / 16);
    var scaleStrength = 1 - Math.abs(rotationStrength) / 16;
    var scaleStrengthY = 1 - Math.abs(rotationStrengthY) / 16;

    var scaleMax = Math.min(scaleStrength, scaleStrengthY);
    var scale = Math.max(scaleMax, 0.93);

    $.view_card_front.rotation = rotationAngel * 20;
    $.view_card_front.translationX = xDistance;
    $.view_card_front.setTranslationY(yDistance);
    $.view_card_front.scaleX = scale;
    $.view_card_front.scaleY = scale;

    cx = e.x;
    cy = e.y;
}

function onTouchEnd(e) {
  // check xDistance
}

$.index.addEventListener("touchmove", onTouchMove);
$.index.addEventListener("touchstart", onTouchStart);
$.index.addEventListener("touchend", onTouchEnd);

in the XML there is a <View id="view_card_front"/> with touchEnabled:false

This will give you a nice smooth movent (and a rotation in this example)

Titanium appcelerator drag view

1 Answers