如何捕捉移动页面元素上的“拖动触摸”事件？

我有一个在PhoneGap中使用JQuery & AngularJS制作的应用程序。我的一页有一张桌子。我想要一种方法让用户在桌子上进行触摸拖动，并使当前触摸的单元格的行&亮起。如何捕捉移动页面元素上的“拖动触摸”事件？

表格的位置：固定，以便用户可以在不移动应用程序窗口的情况下在屏幕上“拖动”。

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

什么是用于获取这种行为触摸工作最好的图书馆&事件的行为吗？

来源

2014-02-25 Ila

这里是我的jsfiddle，从答案叉，显示出列&行突出一个“触摸徘徊”的细胞。您可以使用模拟在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); 
    })

来源

2014-02-25 21:07:34 Ila

如何捕捉移动页面元素上的“拖动触摸”事件？

回答

相关问题