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

时间:2014-07-12 14:23:43

标签: javascript jquery touch

我尝试使用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>

1 个答案:

答案 0 :(得分:0)

您可以缓存&#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
        })
    })
});