Question

前段时间，我在移动设备上浏览器的拖放中苦苦挣扎。默认的javascript事件在移动设备上不起作用。您只能使用触摸事件。

就我而言，我需要通过拖放来交换两个图像以及ID。这里是一个例子：

div{
  display:inline-block;
  border:1px solid #0b79d0;
}

div, img{
        width:120px;
        height:120px;
    }

<div id="1" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="a" draggable="true" ondragstart="dragStart(event)" src="https://static.webshopapp.com/shops/073933/files/156288269/345x345x1/artibalta-white-tiger.jpg"/>
</div>

<div id="2" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="b" draggable="true" ondragstart="dragStart(event)" src="https://yt3.ggpht.com/a-/AN66SAyfsmao4f1EEOqkBP2PgpSUcabPJXLZ1sLEnA=s288-mo-c-c0xffffffff-rj-k-no"/>
</div>

<div id="3" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="c" draggable="true" ondragstart="dragStart(event)" src="https://kinderbilder.download/wp-content/uploads/2018/10/animals-for-dolphin-drawings-pencil-drawings-pinterest-verwandt-mit-delfine-zeichnen-100x100.jpg"/>
</div>

<script>
    function allowDrop(ev){
        ev.preventDefault();
    }

    function dragEnter(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border = "dotted";
        element.style.borderColor = "#0b79d0";
    }

    function dragLeave(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border = "1px solid #0b79d0";
    }

    function dragStart(ev){
        ev.dataTransfer.setData("src", ev.target.id);
        var number = ev.target.id.replace ( /[^\d.]/g, '' );
        ev.dataTransfer.setData("text/plain", number);
    }

    function drop(ev) {
        ev.preventDefault();
        var src = document.getElementById(ev.dataTransfer.getData("src"));

        var srcParent = src.parentNode;
        var tgt = ev.currentTarget.firstElementChild;
        ev.currentTarget.replaceChild(src, tgt);
        srcParent.appendChild(tgt);

        var number1 = srcParent.id.replace(/[^\d.]/g, '');
        var number2 = ev.currentTarget.id.replace(/[^\d.]/g, '');

        var element = document.getElementById(ev.target.id);
        element.style.border = "solid 1px #0b79d0";

        var number = ev.target.id.replace(/[^\d.]/g, '');
    }
</script>

因此dragStart事件存储信息，例如图像。但是，触摸事件无法进行这种操作。

现在我想知道，是否有一种方法可以通过仅通过使用触摸事件来模仿拖动事件来在移动设备上做同样的事情？

Answer 1

我强烈建议您使用库在移动设备中执行此操作。我必须采取相对相同的行为，并且使用了interact.js，它非常实用并且可以移动。

如果您只想向应用程序添加触摸手势，请查看Hammer.js。它是使用触摸事件的主要库。

如果您使用jQuery，请查看此topic。

我希望能有所帮助。

Answer 2

出于教育目的，您所做的事很好。

但是对于开发而言，最好不要重新发明轮子并能够使用能够随时间推移为您提供帮助的工具。

因此，我建议您使用此Drag & Drop库。易于使用，有趣，轻巧并且维护得很好。

Answer 3

前一段时间（如果时间是主要因素）解决此问题的方法是实施触摸打孔-http://touchpunch.furf.com/
这是一个jquery-ui插件，可将触摸事件连接到鼠标事件（因此通常导入lib就足够了-无需更改代码）

通过移动设备的触摸事件模拟拖放事件

3 个答案: