Не работает drag and drop на айфонах

html

<div class="container_word">
    <div class="word">
      <div class="word_place" data-num="0"></div>
      <div class="word_place" data-num="1"></div>
      <div class="word_place" data-num="2"></div>
      <div class="word_place" data-num="3"></div>
      <div class="word_place" data-num="4"></div>
    </div>
    <div class="letters">
      <img src ="./img/k.svg" class="letter letter1" data-num2="2">
      <img src ="./img/e.svg" class="letter letter2" data-num2="3">
      <img src ="./img/p.svg" class="letter letter3" data-num2="0">
      <img src ="./img/a.svg" class="letter letter4" data-num2="1">
      <img src ="./img/t.svg" class="letter letter5" data-num2="4">
    </div>
    <div class="banner5">Game Over</div>
  </div>

это js к нему

let wrapper = document.querySelector('.container_word');
let empty = document.querySelectorAll('.word_place');
let drag = document.querySelectorAll('.letter');
let boxDrag = document.querySelector('.letters');


for (i = 0; i < drag.length; i++) {
  drag[i].addEventListener('touchmove', dragMove);
}

for (j = 0; j < drag.length; j++) {
  drag[j].addEventListener('touchend', dragDrop);
}

let itemAppend;

function dragMove(event) {
  event.preventDefault();

  let drag = this;

  let touch = event.targetTouches[0];
  drag.style.top = `${touch.pageY - wrapper.offsetTop - 20}.px`;
  drag.style.left = `${touch.pageX - wrapper.offsetLeft - 20}.px`;

  empty.forEach(item => {
    if (drag.getBoundingClientRect().top + 20 < item.getBoundingClientRect().bottom &&
      drag.getBoundingClientRect().right - 20 > item.getBoundingClientRect().left &&
      drag.getBoundingClientRect().bottom - 20 > item.getBoundingClientRect().top &&
      drag.getBoundingClientRect().left + 20 < item.getBoundingClientRect().right && drag.getAttribute('data-num2') == item.getAttribute('data-num')) {
      item.classList.add('active');
      itemAppend = item;
    }
    else {
      item.classList.remove('active');
    }

  })
}

function dragDrop() {
  if (itemAppend && itemAppend.classList.contains('active')) {
    itemAppend.append(this);
    this.style.top = `${itemAppend.offsetTop + 13}px`;
    this.style.left = `${itemAppend.offsetLeft + 8}px`;
    empty.forEach(elem => {
      elem.classList.remove('active');
    })
    gameEnd();
  }
  else {
    this.style.top = 'inherit';
    if (this.getAttribute('data-num2') == 2) {
      this.style.bottom = '80px';
      this.style.left = '30px';
    }
    if (this.getAttribute('data-num2') == 0) {
      this.style.bottom = '80px';
      this.style.right = '35px';
      this.style.left = 'inherit'
    }
    if (this.getAttribute('data-num2') == 1) {
      this.style.bottom = '10px';
      this.style.left = '25%';
    }
    if (this.getAttribute('data-num2') == 3) {
      this.style.bottom = '100px';
      this.style.left = '40%';
    }
    if (this.getAttribute('data-num2') == 4) {
      this.style.bottom = '15px';
      this.style.right = '24%';
      this.style.left = 'inherit'
    }
  }
}

function gameEnd(){
  let k = document.querySelector('.letter1');
  let e = document.querySelector('.letter2');
  let p = document.querySelector('.letter3');
  let a = document.querySelector('.letter4');
  let t = document.querySelector('.letter5');

  if(k.parentNode.classList.contains('word_place') &&
     e.parentNode.classList.contains('word_place') &&
     p.parentNode.classList.contains('word_place') &&
     a.parentNode.classList.contains('word_place') &&
     t.parentNode.classList.contains('word_place') ){
      let banner = document.querySelector('.banner5');
      banner.classList.add('active');
     }

}