I have created drag and drop functionality like matching the things , its working fine in the browser. But when i checked same thing in the touch devices like iPad its not working and even the drag functionality is not triggered. Help me in resolving this issue.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="dragg-elem">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
</div>
<div class="dragged-result">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">three</div>
<div id="four">Four</div>
<div id="five">Five</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Css code:
.dragg-elem div ,
.dragged-result div{
width: 100px;
height: 100px;
border: 2px solid #ccc;
display: inline-flex;
justify-content:center;
align-items:center;
}
.dragged-result {
margin-top: 20px;
}
Js code:
$(document).ready(function(){
var dragElemId;
$( ".dragg-elem > div" ).draggable({
drag: function(event,ui){
dragElemId = $(this).attr('id');
console.log(dragElemId);
},
revert: true,
})
$( ".dragged-result div" ).droppable({
accept: '.dragg-elem > div',
drop: function(e,ui){
droppedElem = $(this).attr('id');
console.log(droppedElem);
if(droppedElem === dragElemId){
ui.draggable.css('color', 'green');
ui.draggable.draggable('option', 'revert', false);
}
}
})
});
