列表项在触摸屏浏览器中不可拖动

Question

我使用image-puzzle-js 库创建了一个益智游戏，但<li> 项目不会在移动浏览器中拖动。

我尝试了 jQuery draggable 而不是 draggable:true css

        $(li).draggable({
            snap: '#droppable',
            snapMode: 'outer',
            revert: "invalid",
            helper: "clone"
        });

但它没有按预期工作

我尝试了以下触摸打孔，但仍然出现问题

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
$('li').draggable();

Answer 1

没有看到您拥有的所有代码（html 和 javascript）使这变得更加困难，但是...

从你上面的例子：

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
$('li').draggable();

$('li').draggable(); 没有在你现在拥有的地方做任何事情（除了可能显示在页面上。为了让它工作，它需要在脚本标签中，并且很可能需要在你的文档完全运行后设置为运行已加载。

试着改成这样：

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
    $(document).ready(function() {
        $('li').draggable();
    });
</script>

这应该告诉您的页面在页面完全加载后使您的 <li> 元素可拖动。

一旦你开始了解脚本标签应该在页面中的什么位置（在<head>、<body> 的底部等）、何时将$(document).ready() 与 jQuery 一起使用以及如何使用浏览器的开发者控制台以查看页面加载时发生的情况。