CODEWITHSUNDEEP
titaniumappceleratorappcelerator-titaniumappcelerator-mobile
user3137766
user3137766

Reputation:

Vertical drag (touchMove) a titanium appcelerator view

I want to drag vertically a view in titanium appcelerator and stop when entire view height is shown on the screen. At start the view has a height of 140 and a bottom of -120 so i have can a piece of a view that i can start to drag :

Here is the screenshot

This is how i want to vertically drag "myView", x axis is left to 0 so i can only drag it from bottom to top, the aim is to stop dragging when all myView height is shown (all myView is visible) .

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;
   console.log(e.x);
}

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

    var points = e.source.convertPointToView({
        x: e.x,
        y: e.y
    }, $.single);


$.myView.applyProperties({
        left: 0,
        top: points.y,
        opacity: 1
    });

/*------------------------------------------------------
* HERE I TRY TO DETECT IF myView HEIGHT IS SHOWN ENTIRELY
* is myView.top + myView.height > viewport ?
------------------------------------------------------*/
var t = $.myView.top + $.myView.height;
if( t >= HEIGHT ){
    alert('all myView is visible now ???');
    return; // <= why this has no effect ??
}

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

}
function onTouchEnd(e) {
  // check xDistance
}

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

With this code, i can drag vertically myView but it's not stops when this height is entirely shown.

My first question is : - How can i say if myView is shown entirely? - How to disable vertically drag to top if all of myView height is shown?

Thank you

Upvotes: 0

Views: 311

Answers (1)

aditya063
aditya063

Reputation: 145

Function onTouchMove should be like this.

function onTouchMove(e) {

    /*------------------------------------------------------
    * HERE I TRY TO DETECT IF myView HEIGHT IS SHOWN ENTIRELY
    * is myView.top + myView.height > viewport ?
    ------------------------------------------------------*/
    var t = $.myView.top + $.myView.height;
    if( t >= HEIGHT ){
        alert('all myView is visible now ???');
        return; // <= why this has no effect ??
    }

    xDistance = cx - sx;
    var yDistance = cy - sy;

    var points = e.source.convertPointToView({
        x: e.x,
        y: e.y
    }, $.single);


    $.myView.applyProperties({
        left: 0,
        top: points.y,
        opacity: 1
    });

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

}

Upvotes: 0

Related Questions