CODEWITHSUNDEEP
javascripthtml
harishk
harishk

Reputation: 428

HTML/JS Drag and drop content works in laptop version but doesn't in mobile view

I have this content Drag and drop script which i use to submit some values to a php page when performed. It works like charm on system but when i open the page in mobile, it does get dragged.

the code goes as::

<html>
<head>
<script>
/* Event fired on the drag target */
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);   
}

/* Events fired on the drop target */
function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("submit").submit();
}
</script>
</head>
<body>
<form action="page1.php" method="post" id="submit"></form>

<ul class="link">                       
     <li ondragstart="dragStart(event)" draggable="true" id="dragtarget">500/</li>
</ul>

<div class="rect2" ondrop="drop(event)" ondragover="allowDrop(event)">
     <span class="amnt"> value here </span>
</div>

</body>
</html>

now it works perfectly fine in computer but it doesn't get dragged in mobile version...\

Upvotes: 0

Views: 129

Answers (1)

Bemmu
Bemmu

Reputation: 18247

By default you are supposed to use the touch events instead.

However it seems that if you include this shim you can get drag & drop events to also work on mobile with no modifications to your code.

Upvotes: 1

Related Questions