title: html 5 drag and drop not working on mobile screen
body: <p>I am creating a scenerio in which I want a component of drag and drop,</p>
  
  <p>and I found one after some work around, which looks like the following</p>
  
  <pre><code>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 &gt; 0){
        currentBtn = target.children[0];
        btnsHolder.appendChild(currentBtn);
      }
  
      target.appendChild(document.getElementById(data));    
  }
  #div1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
  }
  &lt;p&gt;Drag the W3Schools image into the rectangle:&lt;/p&gt;
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div id="buttonsHolder"&gt;
    &lt;button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;button 1&lt;/button&gt;
    &lt;button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;button 2&lt;/button&gt;
    &lt;button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;button 3&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but the problem with the same code is,</p>
  
  <p>it is working on pc, but not on mobile screen,</p>
  
  <p>for testing,</p>
  
  <p>after pressing </p>
  
  <blockquote>
    <p>F12</p>
  </blockquote>
  
  <p>clicking on toggle device toolbar will enable a mobile view,</p>
  
  <p>and the same code is not working,</p>
  
  <p>what can be the possible issue here?</p>