Search code examples
iosjquery-uijquery-ui-sortablejquery-ui-touch-punch

Delay option for jQuery Ui Sortable doesn't work on iOS


I am using jQuery UI Touch Punch to enable the Sortable function on iOS Safari. Sortable on iOS works fine, but I am unable to see any of the options (i.e. delay, distance, etc.) function properly. All of the options work in browsers, just not on iOS. I've listed the loaded dependencies and the order I use. Again, the problem is not with Sortable on iOS, rather the Sortable options. Any suggestions?

<script src="assets/js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>         
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script>$( function() {
            $( "#sortable" ).sortable({ scroll:"true", helper:"clone",     opacity: 0.5, cancel: false, delay: 500, distance:10});
        });</script>

Solution

  • I think maybe you have the wrong version of punch ui or misplaced it. Here is a working example.

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <style>#sortable li { padding: 0.4em; font-size: 1.4em; height: 20px; }</style>
    <ul id="sortable">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    </ul>
    <script>
    $( function() {
      $( "#sortable" ).sortable({ scroll:"true", helper:"clone", opacity: 0.5, cancel: false, delay: 500, distance:10});
    });
    </script>