locked
Problem trying to detect swipe gesture in a div (HTML/JavaScript)

    Question

  • Hi,


    I would like to ask how can I detect a horizontal swipe in a div?

    Please, don't tell me to use FlipView because in my case it will not work!


    .
    .
    .
    
    var gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
    
    gestureRecognizer.gestureSettings = Windows.UI.Input.GestureSettings.crossSlide;
    
                    gestureRecognizer.addEventListener('crosssliding', this.onCrossSliding);
    
    .
    .
    .
    
    onCrossSliding: function (args) {
    // Not works anyway
    }

    The above code does not work. When I swipe with a touch device, the function is not called.

    Thanks!


    Thursday, June 21, 2012 4:51 PM

Answers

  • Hi, I have de solution.


    It's not enough to add the code that I paste there. It's necessary to feed the gesture with another DIV's events.

    For example:


    var contentContainer = document.querySelector('.content');
    
                    
                    contentContainer.addEventListener('MSPointerDown', this.processDown, false);
                    contentContainer.addEventListener('MSPointerMove', this.processMove, false);
                    contentContainer.addEventListener('MSPointerUp', this.processUp, false);
                    contentContainer.addEventListener('MSPointerCancel', this.processUp, false);

    And then, on the events, feed the GestureRecognizer

    processDown: function (args) {
                    // Get the current PointerPoint
                    var pp = args.currentPoint;
    
                    // Feed the PointerPoint to GestureRecognizer
                    recognizer.processDownEvent(pp);
                },
    
                processMove: function (args) {
                    // Get intermediate PointerPoints
                    var pps = args.intermediatePoints;
    
                    // processMoveEvents takes an array of intermediate PointerPoints
                    recognizer.processMoveEvents(pps);
                },
    
                processUp: function (args) {
                    // Get the current PointerPoint
                    var pp = args.currentPoint;
    
                    // Feed GestureRecognizer
                    recognizer.processUpEvent(pp);
    
                }

    The documentation is a little confused.

    Thanks, and regards





    • Marked as answer by geovanneb Friday, June 22, 2012 12:11 PM
    Friday, June 22, 2012 12:11 PM

All replies

  • Hi,

    I would like to suggest you to check http://msdn.microsoft.com/en-us/library/windows/apps/jj150607.aspx for the detailed information about how to handle gestures. Please refer to the link and see whether it helps.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Friday, June 22, 2012 9:35 AM
    Moderator
  • Hi,

    Thanks for answering.

    But I have already read these documentation and has already look for the samples. Take a look of this:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/200b4ef0-75ec-4818-90de-7d45c21d0039

    This is my problem. I want just detect when the user swiped in some region of the device and trigger an event. Just it.

    Thanks

    Friday, June 22, 2012 11:44 AM
  • Hi, I have de solution.


    It's not enough to add the code that I paste there. It's necessary to feed the gesture with another DIV's events.

    For example:


    var contentContainer = document.querySelector('.content');
    
                    
                    contentContainer.addEventListener('MSPointerDown', this.processDown, false);
                    contentContainer.addEventListener('MSPointerMove', this.processMove, false);
                    contentContainer.addEventListener('MSPointerUp', this.processUp, false);
                    contentContainer.addEventListener('MSPointerCancel', this.processUp, false);

    And then, on the events, feed the GestureRecognizer

    processDown: function (args) {
                    // Get the current PointerPoint
                    var pp = args.currentPoint;
    
                    // Feed the PointerPoint to GestureRecognizer
                    recognizer.processDownEvent(pp);
                },
    
                processMove: function (args) {
                    // Get intermediate PointerPoints
                    var pps = args.intermediatePoints;
    
                    // processMoveEvents takes an array of intermediate PointerPoints
                    recognizer.processMoveEvents(pps);
                },
    
                processUp: function (args) {
                    // Get the current PointerPoint
                    var pp = args.currentPoint;
    
                    // Feed GestureRecognizer
                    recognizer.processUpEvent(pp);
    
                }

    The documentation is a little confused.

    Thanks, and regards





    • Marked as answer by geovanneb Friday, June 22, 2012 12:11 PM
    Friday, June 22, 2012 12:11 PM