[英]Drag and drop functionality is not working in touch devices?
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. 但是,当我在iPad之类的触摸设备中检查了同一件事时,它不起作用,甚至拖动功能也未触发。 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: CSS代码:
.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: js代码:
$(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);
}
}
})
});
For this version of jquery ui library, use the following touch punch jquery ui 对于此版本的jQuery UI库,请使用以下触摸打孔jQuery UI
https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js
I hope this will fix the issue 我希望这可以解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.