我已经创建了拖放功能，例如匹配事物，它在浏览器中运行良好。但是当我在 iPad 等触摸设备中检查同样的东西时，它不工作，甚至没有触发拖动功能。帮我解决这个问题。
<!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 代码:
.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代码:
$(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);
}
}
})
});
最佳答案
对于这个版本的jquery ui库，使用下面的touch punch jquery ui
https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js
我希望这能解决问题
关于javascript - 拖放功能在触摸设备中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54006032/