如何提高移動瀏覽器的拖放率？

我試圖實現一個類似於使用JavaScript的Tinder應用程序的拖放$ drop效果。如何提高移動瀏覽器的拖放率？

的monipulation適用於透過Chrome調試工具鉻移動模擬器，但是當我嘗試一個真正的移動設備（Nexus 5上，Chrome移動設備）上運行它，它滯後很辛苦。

這裏是我的代碼：

的Javascript

$(function() { 

    $('body').on('touchstart', function(){ 
     $('.item').bind('touchmove',function(e){ 

      var self = this; 
      var xPos = e.originalEvent.touches[0].pageX; 
      $(self).css({'-webkit-transform' : 'rotate('+ xPos +'deg)', 
       '-moz-transform' : 'rotate('+ xPos +'deg)', 
       '-ms-transform' : 'rotate('+ xPos +'deg)', 
       'transform' : 'rotate('+ xPos +'deg)', 
       'left' : xPos+'px' 


      }); 
//   debugger 
     }) 
    }) 
});

CSS

body { 
    overflow:hidden; 
} 
div.data { 

    position: absolute; 
    bottom:0px; 
} 


div.item { 

    height: 150px; 
    width: 150px; 
    position: absolute; 
    left: 100px; 
    top: 200px; 
    background: goldenrod; 
    border: 1px gray solid; 
    line-height:70px; 
    text-align: center; 
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ 

}

HTML ...

</head> 
<body> 


     <div class="item"> 
      Item 
     </div> 

<div class="data"></div> 

</body> 
</html>

來源

2014-07-12 Ilya Libin

您可以緩存「body」和「.item」的選擇器。所以，以後不會有任何DOM旅行。

var bodyness=$('body'); 
var itemness=$('.item'); 

    $(function() { 

    bodyness.on('touchstart', function(){ 
     itemness.bind('touchmove',function(e){ 

      var self = this; 
      var xPos = e.originalEvent.touches[0].pageX; 
      $(self).css({'-webkit-transform' : 'rotate('+ xPos +'deg)', 
       '-moz-transform' : 'rotate('+ xPos +'deg)', 
       '-ms-transform' : 'rotate('+ xPos +'deg)', 
       'transform' : 'rotate('+ xPos +'deg)', 
       'left' : xPos+'px' 


      }); 
//   debugger 
     }) 
    }) 
});

來源

2014-07-12 14:26:35

不起作用..我發現了另一種方法http://smotko.si/tinder-css/ –

如何提高移動瀏覽器的拖放率？

回答

相關問題