-1

I want to use this drag and drop function also on mobile devices but when I run it on my mobile phones it doesn't work.

Here is the code:

copy = 1;
$('.dragArea img').on('dragstart',function(e) {
 console.log('dragge it!',e);
 e.originalEvent.dataTransfer.setData("text",e.target.id);
}).on('dragend',function(e) {
 console.log('dragged',e);
});

$('.drop-field').on('dragover',function(e) {
 //console.log('dragover',e);
 e.preventDefault();
}).on('drop',function(e) {
 e.preventDefault();
 //window.status = 'successfully dragged';
 console.log('drop',e,window.status);
 data = e.originalEvent.dataTransfer.getData("text");
 $(this).append(copy ? $('#' + data).clone() : $('#' + data));
});
.drop-field {
 border: 4px #287CA1 dashed;
 display: inline-block;
 min-width: 50px;
 height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragArea">
 <img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" />
</div>
<div class="dropArea">
 <span class="drop-field"></span>
 <span class="drop-field"></span>
</div>
Mark Chackerian
  • 21,866
  • 6
  • 108
  • 99
der122345
  • 1
  • 2

1 Answers1

0

Probably because the drag and drop functions use mousedown and mouseup, whose are not mobile compliant.

Here is a linked topic : How to get jquery dragging working on mobile devices? where the suggested solution to use jQuery UI Touch Punch (which convert click events to touch events).

Nico_
  • 1,388
  • 17
  • 31