Question

我在PhoneGap中使用JQuery＆amp; AngularJS。我的一个页面有一张桌子。我想要一种方法让用户触摸 - 拖动整个表格，并有行和＆amp;当前触摸的单元格的列亮起。

表格的位置已固定，因此用户无需移动应用程序窗口即可在屏幕上“拖动”。

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");
            });

什么是最好的图书馆和用于使此行为适用于触摸的事件行为？

Answer 1

我遵循了这个答案中推荐的技术：

Crossing over to new elements during touchmove

这是我的JSFiddle，从答案中分出来，显示了列＆amp;突出显示“触摸悬停”单元格的行。您可以使用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);
    })

如何在移动设备上的页面元素上捕获“拖动触摸”事件？

1 个答案: