Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Drag'n Drop funciona no browser mas não funciona no mobile(android)

Boa tarde! Estou experimentando alguns projetos de games, no javascript, e utilizando o Cordova para porta-los para o mobile(Android). Localizei, na internet, a referencia abaixo. O código parece funcionar normalmente no browser(desktop), mas ao converter a aplicação para o Android, pelo Cordova, a funcionalidade drag'n drop parece se perder. Alguém tem uma dica do que pode estar acontecendo?

*Referência (https://javascript.info/mouse-drag-and-drop#drag-n-drop-algorithm)

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
  <img src="https://en.js.cx/clipart/ball.svg" id="ball">
  <script>
    let currentDroppable = null;
    ball.onmousedown = function(event) {
      let shiftX = event.clientX - ball.getBoundingClientRect().left;
      let shiftY = event.clientY - ball.getBoundingClientRect().top;
      ball.style.position = 'absolute';
      ball.style.zIndex = 1000;
      document.body.append(ball);
      moveAt(event.pageX, event.pageY);
      function moveAt(pageX, pageY) {
        ball.style.left = pageX - shiftX + 'px';
        ball.style.top = pageY - shiftY + 'px';
      }
      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);
        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;
        if (!elemBelow) return;
        let droppableBelow = elemBelow.closest('.droppable');
        if (currentDroppable != droppableBelow) {
          if (currentDroppable) {
            leaveDroppable(currentDroppable);
          }
          currentDroppable = droppableBelow;
          if (currentDroppable) {
            enterDroppable(currentDroppable);
          }
        }
      }
      document.addEventListener('mousemove', onMouseMove);
      ball.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;
      };
    };
    function enterDroppable(elem) {
      elem.style.background = 'pink';
    }
    function leaveDroppable(elem) {
      elem.style.background = '';
    }
    ball.ondragstart = function() {
      return false;
    };
  </script>
</body>
</html>
2 respostas
solução

Oi Guilherme,

Esse codigo me parece bem antigo, bem voltada ao Desktop mesmo. Repara que ele tem varios eventos de mouse aí no meio.

Existem formas de se fazer coisas arrastáveis no mobile tbm, trabalhando com os eventos de touch. O melhor talvez fosse ir atrás de algum framework pequeno e simples que já faça isso pra você sozinho (antigamente a gente usava jQuery Mobile, mas hj em dia vc deve achar coisa melhor e mais atualizada).

Vou pesquisar melhor. Obrigado, Sérgio!