Touchevent (iPhone 브라우저)를 사용하여 jQuery에서 드래그 앤 드롭

Question

jQuery를 사용하여 touchstart, touchmove 및 touchend를 듣고 아이폰 Safari에서 'dragitem'을 드래그 할 수있었습니다. 하지만 이제 문제는 'dropArea'로 드래그 할 때 dropArea 응답을 만드는 방법입니다.

예를 들어 'dropArea'는 'dropArea'내에서 'dragitem'이 드래그 될 때 강조 표시/표시, 배경색 변경 등을 할 수 있지만 멀리있는 경우 'dropArea'는 정상적으로 유지됩니다. 어떤 생각?

감사합니다.

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

내가 $의 오프셋 (offset)를 확인 할 배열 $ ('dropArea. ') 또는 이동 간격.