首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用移动设备的触摸事件模拟拖放事件

使用移动设备的触摸事件模拟拖放事件
EN

Stack Overflow用户
提问于 2018-11-29 09:20:16
回答 2查看 6.1K关注 0票数 3

不久前,我还在为移动设备上web浏览器的拖放而苦苦挣扎。默认的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事件存储信息,比如图像。然而,对于触摸事件,这样的操作是不可能的。

现在我在想,有没有一种方法可以在移动设备上做同样的事情,只需使用触摸事件来模仿拖动事件?

EN

回答 2

Stack Overflow用户

发布于 2018-12-04 02:16:16

我强烈建议你在移动中使用一个库来做这件事。我不得不做相对相同的行为,我使用了interact.js,它非常简单,可以移动。

如果你只是想在你的应用中添加触摸手势,那就看看Hammer.js吧。它是使用触摸事件的主库。

如果你使用jQuery,看看这个topic

我希望这能有所帮助。

票数 1
EN

Stack Overflow用户

发布于 2018-12-08 03:13:15

出于教育的目的,你正在做的事情是好的。

但是对于开发来说,最好不要重复发明轮子,并且能够使用一个可以随着时间的推移而帮助你的工具。

所以我向你推荐这个Drag & Drop库。易于使用,有趣,轻量级,维护得很好。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53530511

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档