drag and drop is not working in mobile view.
May I ask why drag and drop isnot working on some mobile phones or is it a problem with the browser?
eg. iphone12 not working but iphone 11 pro max is working.
How to solve the problem ?
$(".draggable").on({
dragstart: function(e) {
$target = $(e.target);
$target.addClass("dragging");
e.originalEvent.dataTransfer.setData("text", $target.text());
},
drag: function(e) {
},
dragend: function(e) {
$(e.target).removeClass("dragging");
}
});
$(".basket").on({
dragenter: function(e) {
$(e.target).addClass("dropping");
},
dragover: function(e) {
e.originalEvent.addEventListener = "copy"; // "move", "link"
return false;
},
dragleave: function(e) {
$(e.target).removeClass("dropping");
},
drop: function(e) {
$(e.target).removeClass("dropping");
var $target = $(e.target);
var dropText = "[" + e.originalEvent.dataTransfer.getData("text") + "]";
$target.text($target.text() + " " + dropText);
}
});.basket {
margin-top: 30px;
width: 500px;
height: 100px;
border: 1px solid gray;
background: lightgray;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="draggable" id ="Banana" draggable="true">Banana</div>
<div class="draggable" id ="Apple" draggable="true">Apple</div>
<div class="draggable" id ="Potato" draggable="true">Potato</div>
<div class="draggable" id ="Tomato" draggable="true">Tomato</div>
<div class="basket"></div>