JQuery UI sorted, not working in iPAD

Question

I am using jQuery UI to sort. This works great in browsers. But in a touch device like iPAD, it doesn't work. Below is the code I'm 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:

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

Please let me know the solution as soon as possible. Thank you in advance.

Answer 1

OK, this is obvious because the jQuery UI library does not include touch events. If you are developing a jQuery-based website using JQuery UI features, some of which do not work on touch screen mobile devices. In your case, that you used the sortable() method is a good example.

There is a simple solution that you can implement. you can use jQuery UI Touch Punch plugin to solve this problem (as you used).

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

You can also clear the browser cache. (in iPad settings> Safari> Clear cookies and data)

Here is a 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>