6

Preciso deixar uma imagem "solta" dentro de uma div no meu site mobile. A div tem dimensões fixas mas a imagem é muito maior, por isso, teria que ser algo semelhante ao iframe, porém, sem scroll e o usuário poderá mover a imagem livremente com os dedos.

Na verdade, é uma lista de imagens, cada uma usando a mesma class.

Exemplo:

<div class="box">
   <img src="imagem1" class="dragme" />
</div>
<div class="box">
   <img src="imagem2" class="dragme" />
</div>
<div class="box">
   <img src="imagem3" class="dragme" />
</div>
<div class="box">
   <img src="imagem4" class="dragme" />
</div>

Exemplo do efeito: (clique para ver o GIF animado)

Uma observação que pode ser importante: tive que desabilitar o "zoom" do site, por motivos de forças maiores.. nisso, o "pinch" com os dedos acredito que não funcionará, ficando somente com a movimentação básica dos dedos.

6
  • 1
    Por favor, publique a imagem aqui, se o tinypic sumir, a pergunta perde um pouco bastante do sentido...
    – brasofilo
    Commented 20/10/2014 às 17:30
  • Tem razão.. pergunta editada.
    – Ricardo
    Commented 20/10/2014 às 17:36
  • da pra fazer essa imagem para de se mexer? fiquei meio tonto lendo essa pergunta kkk Commented 20/10/2014 às 17:38
  • 1
    @RodrigoBorth, acabo de consertar isso :)
    – brasofilo
    Commented 20/10/2014 às 17:39
  • 2
    É pra ficar igual o último quadrinho? xkcd.com/1110 (espero que vocês estejam com tempo)
    – Largato
    Commented 20/10/2014 às 20:59

1 Resposta 1

6

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

Exemplo: http://jsfiddle.net/3t6q1hme/

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';
}
15
  • 3
    proponho onDragon ou onDragão :) Acabo de testar uma variável com acento (ondragão) e o fiddle aceitou (¡?)
    – brasofilo
    Commented 20/10/2014 às 18:47
  • Substitui $('img') por uma classe específica, e essa classe tem position:relative. O efeito não funcionou, tem alguma relação com esse position?
    – Ricardo
    Commented 20/10/2014 às 18:54
  • 1
    @Ricardo juntei mais detalhes à resposta e mudei o jsFiddle para a nova versão.
    – Sergio
    Commented 20/10/2014 às 20:58
  • 1
    @Ricardo testei no iPhone e tablet samsung e o jsFiddle funciona bem. Que plataforma estás a usar?
    – Sergio
    Commented 21/10/2014 às 20:34
  • 1
    @Ricardo aha, sorry. Não devia fazer diferênça pois re-declarar uma função faz com que a outra seja sobrescrita, mas sim deve ser assim: jsfiddle.net/3t6q1hme/4
    – Sergio
    Commented 22/10/2014 às 16:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .