How to capture a "dragging touch" event over page elements on mobile?

Question

I have an app made in PhoneGap with JQuery & AngularJS. One of my pages has a table. I want a way to let the user touch-drag across the table, and have the row & column of the currently-touched cell light up.

The table has position: fixed so that the user can "drag" across the screen without moving the app window.

Here's how this looks for a desktop mouseover event (JSFIDDLE):

table {
position:fixed;
}

.highlight {
background: #7ea2c6;
color: #FFF;
}


        $('td').mouseover(function(e) {
                //Add hover colours on mouseover

                console.log("Event Fired");

                var index, selector, parent;
                index = ($(this).index() + 1);

                parent = ($(this).parent('tr'));
                $(parent).addClass("highlight");


                selector = "tbody td:nth-child(" + index + ")";
                $(selector).addClass("highlight");



            }).mouseout(function(e) {

                    $('tr, td, p').removeClass("highlight");
            });

What's the best library & event behaviour to use to get this behaviour to work for touch?

score 1 · Answer 1 · edited May 23 '17 at 11:57

I followed the technique recommended in this answer here:

Crossing over to new elements during touchmove

Here's my JSFiddle, forked from that answer, showing column & row highlighting for a "touch-hovered" cell. You can view it using Emulate in Chrome:

JSFIDDLE

         function highlightHoveredObject(x, y) {
        $('.catch').each(function() {
          // check if is inside boundaries
          if (!(
              x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
              y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
          )) {

            $('.catch').removeClass('green');

            //Do row and column highlighting+

               var index, selector, parent;
                index = ($(this).index() + 1);

                parent = ($(this).parent('tr'));
                $(parent).addClass("green");


                selector = "tbody td:nth-child(" + index + ")";
                $(selector).addClass("green");


            $(this).addClass('green');
          }
        });
    }


    $(".catch").bind("touchmove", function(evt){
      var touch = evt.originalEvent.touches[0]
      highlightHoveredObject(touch.clientX, touch.clientY);
    })

How to capture a "dragging touch" event over page elements on mobile?

1 Answers1