前段时间,我一直在为移动设备上的网络浏览器拖放而苦苦挣扎。默认的 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 事件存储信息,例如图像。但是,触摸事件无法实现此类操作。
现在我想知道,有没有一种方法可以在移动设备上做同样的事情,只需使用触摸事件来模拟拖动事件?
最佳答案
我强烈建议您使用库在移动设备上执行此操作。 我不得不做相对相同的行为,我使用了 interact.js这是非常少数和移动准备。
如果您只想为您的应用添加触摸手势,请查看 Hammer.js .它是使用触摸事件的主要库。
如果你使用 jQuery,看看这个 topic .
希望对您有所帮助。
关于javascript - 用移动设备的触摸事件模拟拖放事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53530511/