티스토리 뷰


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'); 
}); 
댓글

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함