работа с javascript touchstart и touchleave для мобильного устройства

Question

Я создаю веб-приложение, в котором все мои пользователи будут использовать только мобильные устройства для доступа к приложению, и в моем приложении есть функция перетаскивания, которая выглядит следующим образом:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="buttonsHolder">
  <button id="test" class="btn" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
  <button id="test2" class="btn" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
  <button id="test3" class="btn" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>
</div>

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    let target = ev.target;
    let btnsHolder = document.getElementById("buttonsHolder")
    let currentBtn;
    var data = ev.dataTransfer.getData("text");

    //check if there's already a button inside
    if (target.children.length > 0){
      currentBtn = target.children[0];
      btnsHolder.appendChild(currentBtn);
    }

    target.appendChild(document.getElementById(data)); 

эта функция прекрасно работает для Windows, но не для мобильных устройств, после получения нескольких предложений по stackoverflow и другим поискам в Google, я узнал, что мы можем использовать touchstart и touchleave для того же,

поэтому я сделал что-то вроде следующего,

var btn = document.querySelector('.btn', event);

btn.addEventListener('touchstart', function(event){
    event.dataTransfer.setData("text", event.target.id);
})

btn.addEventListener('touchleave', function(ev){
    ev.preventDefault();
    let target = ev.target;
    let btnsHolder = document.getElementById("buttonsHolder")
    let currentBtn;
    var data = ev.dataTransfer.getData("text");

    //check if there's already a button inside
    if (target.children.length > 0){
      currentBtn = target.children[0];
      btnsHolder.appendChild(currentBtn);
    }

    target.appendChild(document.getElementById(data));
})

, но я получаю ошибку

Uncaught TypeError: Невозможно прочитать свойство 'setData' неопределенного в

event.dataTransfer.setData("text", event.target.id);

что можно сделать, чтобы пользователи могли перетаскивать их на мобильные устройства?