Quantcast
Channel: Appcelerator Developer Center Q&A Tag Feed (3dmatrix)
Viewing all articles
Browse latest Browse all 7

Draggable menu (view)

$
0
0

Hi, I have a view (a menu) at left:0, top:0. I want to drag it only horizontally, but it should NEVER go over its width (when dragging right) and it should never go too much left (-menu.width).

Moreover, when I drag this view left, if the view is more than a half off screen, when I "release" (sorry for the "flashy" concept), the view should automatically go off screen with a simple animation.

When I release it and more than half is on screen, it should animate and animate rightwards until it can (that is: until its displayed in its full width).

I only found a way to animate (on touchmove), but I can't imagine how can I do the rest:

var m3d = Ti.UI.create3DMatrix();
var currentX;
 
menu.addEventListener('touchstart', function(e) {
    currentX = e.x;
});
menu.addEventListener('touchmove', function(e) {
 
    var deltaX = e.x - currentX;
 
    var deltaY = 0;
 
    m3d = m3d.translate(deltaX, deltaY, 0);
 
    menu.animate({
        transform : m3d,
        duration : 100
    });
 
});
Any help is appreciated

Viewing all articles
Browse latest Browse all 7

Latest Images

Trending Articles





Latest Images