Glisser-déposer dans jQuery en utilisant TouchEvent (navigateur iPhone)

Question

I en utilisant jQuery pour écouter le touchstart, touchmove et touchEnd, et je capable de faire glisser le 'dragitem' dans iphone Safari (changement de position sur la base de la touchmove). Mais maintenant, la question est de savoir comment je peux faire la réponse dropArea lorsque la traînée « de dragitem » au « dropArea ».

Par exemple, le « dropArea » mettra en évidence / éclat, changement de couleur d'arrière-plan, etc. et quand le « dragitem » est glisser dans le « dropArea », mais quand il est loin de la « dropArea » restera normale. Toute idée?

Merci d'avance.

HTML:

<div class='dragArea' >
 <div id='box1' class='dragitem'>
 </div>
 <div id='box2' class='dragitem'>
 </div>
</div>

<div class='dropArea'></div>

jQuery:

var startTouchX = null;
var startTouchY = null;
var moveTouchX = null;
var moveTouchY = null;
var startPositionX = null;
var startPositionY = null;

$('.dragitem').bind('touchstart',function(event){
    event.preventDefault();
    var e = event.originalEvent;
    startTouchX = e.targetTouches[0].pageX;
    startTouchY = e.targetTouches[0].pageY;
    startPositionX = $(this).css('left');
    startPositionY = $(this).css('top');
});
$('.dragitem').bind('touchmove', function(event){
    event.preventDefault();
    var e = event.originalEvent;
    moveTouchX = e.targetTouches[0].pageX;
    moveTouchY = e.targetTouches[0].pageY;
    $('#movex').text(moveTouchX);
    $('#movey').text(moveTouchY);
    $(this).css({top: (moveTouchY - 50), left: (moveTouchX - 5)});
});
$('.dragitem').bind('touchend', function(event){
    $(this).animate({top: startPositionY, left: startPositionX}, 'fast');
});

Answer 1

i vérifierait l'offset () de $ ( '. Dragitem ') tableau et $ ('. DropArea.) Dans le mouvement Handler ... ou un intervalle.