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>

请尽快告知我解决方案。先谢谢了。

- Deepak Ranjan Jena

---

你是在模拟器上运行还是实际设备上运行？在我的端上它可以工作。确保jquery.ui.touch-punch.js在IPAD上被加载。 - Sunil Mishra

Answer 1

好的，很明显，因为jQuery UI库不包含触摸事件。如果您开发一个使用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>

- Umanda