Question

我正在创建一个Web应用程序，其中所有用户都将仅使用移动设备访问该应用程序，并且我的应用程序中具有拖放功能，如下所示，

<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));
})

但是我得到了错误

未捕获的TypeError：无法读取未定义的属性'setData'

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

我该怎么做才能允许用户在移动设备上拖放？

使用javascript touchstart和touchleave移动设备

0 个答案: