Question

我创建了拖放功能，例如匹配事物，它在浏览器中工作正常。但是，当我在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);
        }
    }
})
});

Answer 1

对于此版本的jQuery ui库，请使用以下触摸打孔jQuery ui

https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js

我希望这可以解决问题

拖放功能在触摸设备上不起作用吗？

1 个答案: