Question

首先，我创建一个响应式网站，所以我使用鼠标功能和触摸功能的拖放功能。在互联网上搜索后，我发现了这个建议：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来使用它＆＃34; hack＆＃34;来自touchpunch？

或者我可以以某种方式使这段代码也能用触摸工作吗？

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

Answer 1

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

正如我所看到的，你使用的是html5拖放式API，这很好但会出现浏览器兼容性问题（例如，它在IE＆lt; 10中不起作用）。

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

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

带触摸功能的HTML5拖放功能

1 个答案: