javascript html 5拖放在移动的屏幕上不工作

woobm2wo 于 2023-01-04 发布在 Java

关注(0)|答案(3)|浏览(189)

我正在创建一个场景，其中我希望有一个拖放组件，
经过一番努力，我找到了一个，如下所示

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>

但是相同代码的问题是，
它在pc上工作，但不在移动的屏幕上工作，
为了测试，
压后
十二层
点击切换设备工具栏将启用移动的视图，
并且相同的代码不起作用，
这里可能的问题是什么？

JavaScript

来源：https://stackoverflow.com/questions/52554613/html-5-drag-and-drop-not-working-on-mobile-screen

3条答案

按热度按时间

nr7wwzry1#

某些移动设备不侦听drag事件。要解决此问题，必须使用触摸事件touchstart、touchend、touchcancel、touchleave、touchmoveTouchEvent - Web APIs

// 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>

赞(0）回复(0）举报 2023-01-04

laximzn52#

这可能是由于滚动操作覆盖。添加touch-action: none; CSS样式到您的.draggable类

赞(0）回复(0）举报 2023-01-04

xdyibdwo3#

我发现此代码适用于移动的. https://codepen.io/deepakkadarivel/pen/LrGEdL

window.onload = function() {
  // find the element that you want to drag.
  var box = document.getElementById('box');
  
  /* listen to the touchMove event,
  every time it fires, grab the location
  of touch and assign it to box */
  
  box.addEventListener('touchmove', function(e) {
    // grab the location of touch
    var touchLocation = e.targetTouches[0];
    
    // assign box new coordinates based on the touch.
    box.style.left = touchLocation.pageX + 'px';
    box.style.top = touchLocation.pageY + 'px';
  })
  
  /* record the position of the touch
  when released using touchend event.
  This will be the drop position. */
  
  box.addEventListener('touchend', function(e) {
    // current box position.
    var x = parseInt(box.style.left);
    var y = parseInt(box.style.top);
  })
  
}

with box是可拖动div的ID
请注意，这段代码不会替换桌面的代码，所以在我的例子中，我有两种代码，并且我的可拖动元素可以在两种代码上工作

赞(0）回复(0）举报 2023-01-04

我来回答

javascript html 5拖放在移动的屏幕上不工作

3条答案

相关问题

热门标签

最新问答