Какой мобильный эквивалент DragEvent? - PullRequest
Новая
       9

Какой мобильный эквивалент DragEvent?

0 голосов
/ 24 октября 2018

Я сделал карусель, и мой dragevent отлично работает на компьютере, но не на мобильном.

Я видел, как кто-то предлагал использовать touchEvent, но touchEvent не работает ни на одном. 

const $img = document.querySelector('img');

$img.addEventListener('dragstart', function(e){ console.log(`Start: ${e.screenX}`) },false);

$img.addEventListener('dragend', function(e){ console.log(`End: ${e.screenX}`) },false)

если я делаю тот же запрос, используя touchstart или touchend, я не получаю значения для события 

/* event does not fire */
$img.addEventListener('touchstart', function(e){ console.log(`Evento: ${e.screenX}`) }, false)

1 Ответ

0 голосов
/ 24 октября 2018

На мобильном телефоне вы можете использовать: 

<html>
  <body>
    <p id="test">Drag Me!</p>
    <script>
      const p = document.getElementById("test");
      p.addEventListener("dragstart", handleStuff, false);
      p.addEventListener("touchstart", touch2drag, false);
      function handleStuff(e) {
        e.stopPropagation();
        e.preventDefault();
        if (e.clientX) {
          console.log(`Stuff happened at ${e.clientX}x;${e.clientY}.`);
        }
      }
      function touch2drag(e) {
        e.stopPropagation();
        e.preventDefault();
        // translate to mouse event
        let clkEvt = document.createEvent("MouseEvent");
        clkEvt.initMouseEvent(e.type.replace("touch", "drag"), true, true, window, e.detail,
                    e.touches[0].screenX, e.touches[0].screenY,
                    e.touches[0].clientX, e.touches[0].clientY,
                    false, false, false, false,
                    0, null);
        p.dispatchEvent(clkEvt);

        // or just handle touch event
        handleStuff(e);
      }

    </script>
  </body>
</html>
...