-4

i Want to run this code on my mobile phone but if i try to move the picture it don't move and there is no reaction how can i keep this code running on mobile

thanks der122345

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>
der122345
  • 1
  • 2
  • Possible duplicate of [Jquery dragstart and dragend events in Jquery UI](http://stackoverflow.com/questions/15342172/jquery-dragstart-and-dragend-events-in-jquery-ui) – imvain2 May 13 '16 at 16:19
  • i want to use the code on an mobile device on computer its working – der122345 May 13 '16 at 16:20
  • Look at this, seems like an answer. http://stackoverflow.com/questions/13940421/how-to-get-jqueryui-drag-drop-working-with-touch-devices – Seano666 May 13 '16 at 17:29

1 Answers1

1

Native drag and drop is not supported on mobile. You will need to resort to either:

  1. The Touch API, using touchmove and touchend:

    el.addEventListener("touchstart", handleStart, false);
    el.addEventListener("touchend", handleEnd, false);
    el.addEventListener("touchcancel", handleCancel, false);
    el.addEventListener("touchmove", handleMove, false);
    
  2. The Drag and Drop shim which only supports iOS.

  3. Or jQuery UI Draggable with Touch Punch.

It really all depends on what browser support you're looking for and how much of your code are you willing to rewrite.

Dan H
  • 3,524
  • 3
  • 35
  • 46