带有触摸功能的 HTML5 拖放答案

【问题标题】：HTML5 Drag and Drop with touch function带有触摸功能的 HTML5 拖放
【发布时间】：2014-05-06 08:33:58
【问题描述】：

首先，我制作了一个响应式网站，因此我将这个拖放功能与鼠标功能和触摸功能一起使用。在网上搜索后，我发现了这个建议：http://touchpunch.furf.com/。唯一的问题是，这对我没有帮助。

我猜是因为可能需要 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>

当我只想将图片从一个区域拖放到另一个区域时，此代码可以正常工作。但是我已经尝试了每一个建议来让触摸拖放就像使用鼠标一样工作。

我是否需要从这个简单的代码转向一些真正的 JavaScript 才能使用来自 touchpunch 的“hack”？

或者我能否以某种方式使这段代码也能与触摸一起使用？

如果您想知道，那么这段代码来自 W3schools。 :)

【问题讨论】：

标签： jquery html drag-and-drop

【解决方案1】：

Firstival，我建议去掉内联事件处理程序（例如：ondragstart="drag(event)"）。

如我所见，您使用 html5 拖放 API，这很好，但会出现浏览器兼容性问题（例如，它在 IE

为了让它在大多数浏览器中都能正常运行，我建议使用带有 touch-punch 的 sortable 和 draggable 这样的 jquery-ui 小部件，这在大多数情况下可以处理触摸事件。

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

【讨论】：