Drag and Drop in jQuery utilizzando TouchEvent (browser iPhone)
-
29-09-2019 - |
Domanda
I utilizzando jQuery per ascoltare la TouchStart, touchmove e touchend, e io in grado di trascinare il 'dragitem' in iPhone Safari (cambiamento di posizione che si basa sulla touchmove). Ma ora il problema è come posso fare la risposta dropArea quando il 'dragitem' trascinare per la 'dropArea'.
Per esempio il 'dropArea' metterà in evidenza / bagliore, colore di sfondo il cambiamento, ed ecc, quando il 'dragitem' è trascinare all'interno del 'dropArea', ma quando si è lontano il 'dropArea' rimarrà normale. Qualche idea?
Grazie in anticipo.
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');
});
Soluzione
i controllerebbe l'offset () del $ ( 'dragitem ') matrice e $ ('. DropArea.') In movimento Handler ... o un intervallo.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow