1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default Answered: Carousel listen for and intercept swipe event?

    Answered: Carousel listen for and intercept swipe event?


    In certain cases, I want to prevent a user from swiping my carousel in a certain direction . Is there a way to listen for swipe events on the carousel and intercept and prevent the default behavior?

  2. You can override the carousel class

    The "swipe" is given by the drag start event:

    Code:
     onDragStart: function(e) {
            var direction = this.getDirection(),
                absDeltaX = e.absDeltaX,
                absDeltaY = e.absDeltaY,
                directionLock = this.getDirectionLock();
    
            this.isDragging = true;
    
            if (directionLock) {
                if ((direction === 'horizontal' && absDeltaX > absDeltaY)
                    || (direction === 'vertical' && absDeltaY > absDeltaX)) {
                    e.stopPropagation();
                }
                else {
                    this.isDragging = false;
                    return;
                }
            }
    
            if (this.isAnimating) {
                this.getActiveCarouselItem().getTranslatable().stopAnimation();
            }
    
            this.dragStartOffset = this.offset;
            this.dragDirection = 0;
        },

    Check source here and implement your logic in a subclass
    http://docs.sencha.com/touch/2-0/sou...ousel-Carousel

  3. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    You can override the carousel class

    The "swipe" is given by the drag start event:

    Code:
     onDragStart: function(e) {
            var direction = this.getDirection(),
                absDeltaX = e.absDeltaX,
                absDeltaY = e.absDeltaY,
                directionLock = this.getDirectionLock();
    
            this.isDragging = true;
    
            if (directionLock) {
                if ((direction === 'horizontal' && absDeltaX > absDeltaY)
                    || (direction === 'vertical' && absDeltaY > absDeltaX)) {
                    e.stopPropagation();
                }
                else {
                    this.isDragging = false;
                    return;
                }
            }
    
            if (this.isAnimating) {
                this.getActiveCarouselItem().getTranslatable().stopAnimation();
            }
    
            this.dragStartOffset = this.offset;
            this.dragDirection = 0;
        },

    Check source here and implement your logic in a subclass
    http://docs.sencha.com/touch/2-0/sou...ousel-Carousel

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Thanks exactly what I needed.

Thread Participants: 1

Tags for this Thread