jQuery UI 可排序在 iPAD 中不起作用

Question

我正在使用 jquery UI 可排序功能。这在浏览器中工作正常。但在 iPAD 等触控设备中，它不起作用。下面是我正在使用的代码

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
<script src="js/jquery.ui.touch-punch.js"></script> 

<script>
  $(function() {
    $( ".documents" ).sortable();
    $( ".documents" ).disableSelection();
  });

我的 HTML 是：

        <div id="bodyContainer">
      <ul class="documents">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
            </div>

请尽快告诉我解决方案。先感谢您。

Answer 1

好的，很明显，因为 jQuery UI 库不包含触摸事件。如果您开发了一个 jQuery 驱动的网站，使用 jQuery UI 功能主义者，其中一些将无法在支持触摸的移动设备上工作。在您的情况下，您使用的sortable()方法就是一个很好的例子。

您可以实施一个简单的解决方案。您可以使用jQuery UI Touch Punch插件来解决这个问题（如您所用）。

请确保您的jquery.ui.touch-punch.js文件加载与否。我认为如果它加载正确，它应该可以工作。

您也可以清除浏览器缓存。（在 iPad 设置 > Safari > 清除 Cookie 和数据中）

这是工作示例：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> 



<script>
  $(function() {
    $( ".documents" ).sortable();
    $( ".documents" ).disableSelection();
  });
</script>

<div id="bodyContainer">
      <ul class="documents">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
</div>