티스토리 뷰


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'); 
}); 
저작자 표시
신고
댓글
댓글쓰기 폼