Jquery 具有触摸功能的HTML5拖放

首先，我制作了一个响应迅速的站点，所以我使用这个拖放功能，包括鼠标功能和触摸功能。在互联网上搜索后，我发现了以下建议：。唯一的问题是，这对我没有帮助

我想这是因为可能需要JavaScript

我的正常触摸功能代码（使用鼠标）如下所示：

HTML

<div id="dragzone" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="img/perso_paintball.png" draggable="true"
            ondragstart="drag(event)" width="80" height="80">

    <img id="drag2" src="img/family_picture.png" draggable="true"
            ondragstart="drag(event)" width="80" height="80">

    <img id="drag3" src="img/Tøse-hygge.png" draggable="true"
            ondragstart="drag(event)" width="80" height="80">

    <img id="drag4" src="img/romantisk.png" draggable="true"
            ondragstart="drag(event)" width="80" height="80">
</div>

jQuery

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

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

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

当我只想将图片从一个区域拖放到另一个区域时，这段代码工作得很好。 但我已经尝试了每一个建议，让触摸拖放像鼠标一样工作

我是否需要从这个简单的代码转换成一些真正的JavaScript来使用这个来自touchpunch的“黑客”呢

或者我能不能让这段代码也能用touch工作

---

如果您想知道，那么这段代码来自W3schools.：）

Firstival，我建议去掉内联事件处理程序（例如：

ondragstart=“drag（event）

”）

正如我所看到的，您使用html5拖放API，这很好，但在浏览器兼容性方面会有问题（例如，它在IE<10中不起作用）

为了让它在大多数浏览器中都能很好地工作，我建议使用jqueryui小部件和touchpunch，在大多数情况下，touchpunch可以处理触摸事件

如果您需要调用可拖动功能的代码示例，可以在jQueryUI网站上找到它