O que precisa é de uma funcionalidade tipo drag.
Deixo em baixo um exemplo que fiz agora para drag em touch e mouse.
Acerca da posição do touchmove:
O evento que é passado no eventhandler é diferente para eventos de mouse e de touch. Nos eventos de mouse a posição do ponteiro é obtida pelo evento.clientX
e evento.clientY
. No entanto no touch esse evento encontra-se em evento.touches[0].clientX
e resp. evento.touches[0].clientY
. Por causa disto tive de acrescentar uma função para normalizar o evento detectando se se trata de um touch ou de um mouse. Podia ter feito via e.type
mas optei asssim.
(Estou a usar e.originalEvent
porque o jQuery não disponibiliza a propriedade touch
no evento. Disponibiliza somente na propriedade originalEvent
onde ele passa uma referência ao evento original).
Portanto a função para normalizar a posição:
function normalizarEvento(e) {
if (e.originalEvent.touches && e.originalEvent.touches.length) return e.originalEvent.touches[0];
return e;
}
Para isso precisa de escutar alguns eventos:
Para inicar o drag:
$('img').on('mousedown touchstart', toggleDrag);
Para parar oo drag:
$('img').on('mouseup touchend mouseout', toggleDrag);
A função toggleDrag
verifica se o tipo de evento é o de iniciar e dá um valor true
à flag que guarda a informação se o drag está a acontecer.
Esta função guarda ainda a posição do evento em relação à posição da imagem, para poder ter essa informação na outra função quando fôr mover a imagem. Juntei uma função extra para isto tendo em conta a posiçõ relativa na página:
function buscarPosicaoRelativa(el) {
var bodyRect = document.body.getBoundingClientRect();
var elemRect = el.getBoundingClientRect();
return {
x: elemRect.left - bodyRect.left,
y: elemRect.top - bodyRect.top
}
}
A função drag
muda a margin
esquerda e topo conforme a posição do mouse.
Seria ainda possivel medir a velocidade do touch para poder mover rápidamente e com efeito de aceleração. Mas isso enquadra-se bem noutra pergunta. E parte dela já respondi aqui: Como saber a direção do scroll da roda do mouse
var ondrag = {};
$('.dragme').on('mouseup touchend mouseout', toggleDrag);
$('.dragme').on('mousedown touchstart', toggleDrag);
$('.dragme').on('mousemove touchmove', drag);
function normalizarEvento(e) {
if (e.originalEvent.touches && e.originalEvent.touches.length) return e.originalEvent.touches[0];
return e;
}
function buscarPosicaoRelativa(el) {
var bodyRect = document.body.getBoundingClientRect();
var elemRect = el.getBoundingClientRect();
return {
x: elemRect.left - bodyRect.left,
y: elemRect.top - bodyRect.top
}
}
function toggleDrag(evt) {
evt.preventDefault();
var moveTouch = normalizarEvento(evt);
ondrag.on = evt.type == 'mousedown' || evt.type == 'touchstart';
if (ondrag.on) ondrag.start = {
x: moveTouch.clientX - this.getBoundingClientRect().left,
y: moveTouch.clientY - this.getBoundingClientRect().top
};
}
function toggleDrag(evt) {
evt.preventDefault();
var moveTouch = normalizarEvento(evt);
var posicaoElemento = buscarPosicaoRelativa(this);
ondrag.on = evt.type == 'mousedown' || evt.type == 'touchstart';
if (ondrag.on) ondrag.start = {
x: moveTouch.clientX - posicaoElemento.x + this.parentNode.getBoundingClientRect().left,
y: moveTouch.clientY - posicaoElemento.y + this.parentNode.getBoundingClientRect().top
};
}
function drag(evt) {
evt.preventDefault();
var moveTouch = normalizarEvento(evt);
if (!ondrag.on) return;
var x = moveTouch.clientX;
var y = moveTouch.clientY;
this.style.marginLeft = x - ondrag.start.x + 'px';
this.style.marginTop = y - ondrag.start.y + 'px';
}