스마트폰 터치, jquery touchmove 제어

I using jQuery to listen to the touchstart,touchmove and touchend, and I able to drag the 'dragitem' in iphone Safari(position change that base on the touchmove). But now the issue is how i can make the dropArea response when the 'dragitem' drag to the 'dropArea'.

For example the 'dropArea' will highlight/glow, change background color, and etc when the 'dragitem' is drag within the 'dropArea', but when it is away the 'dropArea' will remain normal. Any idea?

Thank in advance.

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'); 

});