我正在创建一个场景,我想要一个拖放组件,
经过一些工作,我找到了一个,如下所示
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
let target = ev.target;
let btnsHolder = document.getElementById("buttonsHolder")
let currentBtn;
var data = ev.dataTransfer.getData("text");
//check if there's already a button inside
if (target.children.length > 0){
currentBtn = target.children[0];
btnsHolder.appendChild(currentBtn);
}
target.appendChild(document.getElementById(data));
}
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="buttonsHolder">
<button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
<button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
<button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>
</div>
但相同代码的问题是,
它可以在电脑上运行,但不能在移动屏幕上运行,
供测试用,
按下后
F12
单击切换设备工具栏将启用移动视图,
并且相同的代码不起作用,
这里可能有什么问题?
一些移动设备不监听drag
事件。为了解决这个,你必须使用触摸事件touchstart
,touchend
,touchcancel
,touchleave
,touchmove
的TouchEvent -网络的API
// get The element on which to attach the event
var btn = document.querySelector('.btn');
// attaching each event listener
btn.addEventListener('touchstart', function(){
console.log('btn touched');
})
btn.addEventListener('touchend', function(){
console.log('btn leaved');
})
btn.addEventListener('touchmove', function(){
console.log('btn leaved');
})
btn.addEventListener('touchleave', function(){
console.log('btn moving end');
})
btn.addEventListener('touchcancel', function(){
console.log('btn moving cancel');
})
<button class="btn">test</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句