Question

我尝试使用javascript实现类似于Tinder app的拖动$ drop效果。

通过chrome调试工具，Chrome操作仿真器上的操作很好，但是当我尝试在真正的移动设备（nexus 5，chrome mobile）上运行它时，它会非常困难。

这是我的代码：

的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>

Answer 1

您可以缓存＆＃39; body＆＃39;的选择器和＆＃39; .item＆＃39;。因此，以后不会再使用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
        })
    })
});

如何改善移动浏览器的拖放效果？

1 个答案: