使用jquery mobile touchmove事件拖放移动设备

Question

我正在尝试使用touchmove事件使用jquery mobile实现iPad的拖放功能。在此之前，我在这里阅读了很多问题，如this one，它实际上寻找一个合适的框架，我没有考虑。另外this，this和this有助于实现拖放的方式。

我的代码如下所示（这里只是我的相关html / js，完全相关的代码可以在小提琴中找到）。

HTML

<span class="square"> 1 </span>
<span class="square-big"> 1 </span>

JS

$('.square').on('touchmove',function(e){
    var touch = e.originalEvent.touches[0];
    var elm = $(this).offset();
    $(this).addClass('selected').css({
        left: touch.screenX - elm.left,
        top: touch.screenY - elm.top
    });
    $('.square-big').addClass('selected');
}).on('touchend', function(e){
    $(this).removeClass('selected');
    $('.square-big').removeClass('selected');
});

我的代码部分有效。我的意思是，这个元素正在移动，但它移动的方式真的很难看，它有点远离手指。它也在颤抖。

这是因为我错误地计算了我的左边和顶边。但我无法得到我究竟需要如何计算它们。任何想法都将不胜感激。

您可以尝试我的fiddle，但出于某种原因，我无法正确摆脱jsfiddle中的屏幕移动，因此最好将整个代码复制到run it through localhost。