Glisser et déposer dans jQuery en utilisant Touchevent (navigateur iPhone)

Question

J'utilise jQuery pour écouter le touchstart, toucher et toucher, et je peux faire glisser le 'dragitem' dans iphone Safari (position changer cette base sur le touchmove). Mais maintenant, le problème est de savoir comment je peux faire la réponse dropArea lorsque le 'dragitem' se déplace vers le 'dropArea'. Par exemple, le 'dropArea' mettra en surbrillance, changera la couleur d'arrière-plan et etc quand le 'dragitem' sera glissé dans le 'dropArea', mais quand il est absent, le 'dropArea' restera normal. Une 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 (». Dragitem ').

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

je vérifier le décalage() du tableau $ et $ (' dropArea. ') dans le gestionnaire de mouvement ... ou un intervalle.