iphone - 使用Touchevent在jQuery中拖放(iPhone浏览器)

我使用jQuery来监听touchstart，touchmove和touchend，并且能够在iPhone Safari中拖动“ dragitem”（基于touchmove的位置更改）。但是现在的问题是，当“ dragitem”拖动到“ dropArea”时，我如何做出dropArea响应。

例如，当将“ dragitem”拖动到“ dropArea”中时，“ dropArea”将高亮/发光，更改背景颜色等，但是当它离开时，“ dropArea”将保持正常。任何的想法？

预先感谢。

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

最佳答案

我会检查$（'。dragitem'）数组的offset（）和移动处理程序中的$（'。dropArea。'）...或一个间隔。