Перетаскивание в jQuery с помощью Touchevent (браузер iPhone) - PullRequest
Новая
       27

Перетаскивание в jQuery с помощью Touchevent (браузер iPhone)

2 голосов
/ 30 ноября 2010

Я использую jQuery для прослушивания сенсорного запуска, сенсорного перемещения и касания, и я могу перетащить «dragitem» в iphone Safari (изменение положения этой базы на сенсорном перемещении). Но теперь проблема в том, как я могу сделать ответ dropArea, когда «dragitem» перетаскивает в «dropArea».

Например, «dropArea» будет подсвечиваться / светиться, изменять цвет фона и т. Д., Когда «dragitem» перетаскивается в «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');
});

1 Ответ

1 голос
/ 09 декабря 2010

Я бы проверил смещение () массива $ ('. Dragitem') и $ ('. DropArea.') В обработчике перемещения ... или интервал.

...