HTML Drag and Drop on mobile (touch screens)

1

I'm thinking of making a dashboard using the Drag and Drop features of HTML.

Example taken from w3schools

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
div {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<html>
<head></head>
<body>

  <p>Arraste para o retângulo:</p>

  <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="https://i.stack.imgur.com/uwI5h.png?s=48&g=1"draggable="true" ondragstart="drag(event)" width="50" height="50">

</body>
</html>

I'd like to know how I can make this feature work when it's opened on a mobile (or another touchscreen), because the click is different:

  • If I touch and release, it would be a click
  • If I tap and hold, open the options
asked by anonymous 02.08.2018 / 12:51

2 answers

0

I already had this problem and I ended up using this solution: link

Bernardo Castilho's script overwrites events and makes them compatible with touch, it can solve your problem.

jQuery also has a workaround, but since you've posted the code in pure javascript, I think this solution is more in line with what you're looking for.

Here is the js file: DragDropTouch.js

    
02.08.2018 / 14:15
0

I recommend using Sortable:

  • Rubaxa / Sortable This guy is a plugin that uses native features for responsive drag and drop, it can be implemented with any CSS framework
02.08.2018 / 14:13