我使用 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') 数组和 $('.dropArea.') 的 offset() ... 或间隔。
关于iphone - 使用 Touchevent 在 jQuery 中拖放(iPhone 浏览器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4311150/