jQuery UI sortable not working in iPAD

Question

I am using jquery UI sortable functionality. This works fine in browsers. But in touch device such as iPAD it is is not working. Below is the code i am using

<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();
  });

My HTML is:

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

Please let me know the solution asap. Thank you in advance.

Answer 1

OK, It is obvious, because jQuery UI library does not include the touch events. If you develop a jQuery powered web site, with using jQuery UI functionalists some of are wont work in touch enable mobile devices. In your case that you have used sortable() method is good example.

There is a simply solution you can implement. you can use a jQuery UI Touch Punch plugin for overcome this issue (As you used).

Please make sure that your jquery.ui.touch-punch.js file load or not. I think if it is loading correctly it should work.

Also you can clear the browser cache. (in iPad Settings > Safari > Clear Cookies and Data)

Here is the working example :

<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>