I am trying to implement drag and drop functionality for iPad using jquery mobile using touchmove event. Before doing this I read kind of a lot of questions here like this one, which actually looks for a suitable framework, which I am not looking into. Also this, this and this which helps with how drag and drop can be imlemented.
My code looks as follows (here is only my relevant html/js, the full relevant code can be found in fiddle).
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');
});
My code partially works. By this I mean, that the element is moving but way it moves is really ugly and it is kind of far away from the finger. It is also shaking.
This is because I calculate wrongly my left and top. But I can not get how exactly I need to calculate them. Any ideas would be appreciated.
You can try my fiddle, but for some reason I can not correctly get rid of screen move in jsfiddle, so it is better to copy the whole code and to run it through localhost.
