html 5 drag and drop not working on mobile screen

Question

I am creating a scenerio in which I want a component of drag and drop,

and I found one after some work around, which looks like the following

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>

but the problem with the same code is,

it is working on pc, but not on mobile screen,

for testing,

after pressing

F12

clicking on toggle device toolbar will enable a mobile view,

and the same code is not working,

what can be the possible issue here?

Byrdie

Please check the answer of this question: https://mcmap.net/q/275750/-html5-drag-amp-drop-for-mobile – Journal

Answer 1

Some mobile devises don't listen to the drag event. To solve that you must use the touch event touchstart, touchend, touchcancel, touchleave, touchmove TouchEvent - 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>

Stadiometer

can you please give me an example – Byrdie

You can create some function to hangle each drag event type and attach the some function to the corresponding touch event – Stadiometer

Answer 2

It might be due to the scroll action overriding. Add touch-action: none; CSS style to your .draggable class

Piste

Answer 3

I find this code work for mobile. 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 is the id of the draggable div

Please note that this code does not replace the code for desktop, so in my case, I have both and my draggable elements work on both

Speedway