function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ajay LAjay L 

jQuery Sortable not working on iPhone

Hi,

I have this vf page and trying to make sortable table. It is working on laptop browser. However when I launch it in iPhone the sorable is not working. the rows are not moving. I also used jQuery touch punch.

<apex:page >
    <html lang="en">
  <head>
      <meta charset="utf-8"/>

    <title>jQuery UI Touch Punch - Mobile Device Touch Event Support for jQuery UI</title>

      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="description" content=""/>
      <meta name="author" content=""/>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>    
<script
type="text/javascript"
charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"
>
</script>
    <![endif]-->

        <link rel="shortcut icon" href="/ico/favicon.ico"/>
            <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png"/>
                <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png"/>
                    <link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png"/>

    
    <style>body { background:#fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }</style>

    <apex:stylesheet value="{!URLFOR($Resource.style, 'style.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.testResources, 'normalize.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.testResources, 'jquery-1.8.2.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.testResources, 'jquery-ui.js')}"/> 
     <apex:includeScript value="{!URLFOR($Resource.jResources, 'jquery.min.js')}"/> 
     <apex:includeScript value="{!URLFOR($Resource.jResources, 'jquery-ui.min.js')}"/> 
     <apex:includeScript value="{!URLFOR($Resource.jResources, 'jquery.ui.touch-punch.min.js')}"/> 
    <apex:stylesheet value="{!URLFOR($Resource.jResources, 'jquery.ui.all.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jResources, 'jquery-ui-1.10.2.custom.min.css')}"/>
  </head>
  <body>

    <div class="container">
      

      <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
        </style>
        <script>
        $(function() {
          $( "#sortable" ).sortable();
          $( "#sortable" ).disableSelection();
        });
        </script>


      <div class="demo">

      <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>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
      </ul>

      </div><!-- End demo -->



      <div class="demo-description" style="display: none; ">
      <p>
        Enable a group of DOM elements to be sortable. Click on and drag an
        element to a new spot within the list, and the other items will adjust to
        fit. By default, sortable items share <code>draggable</code> properties.
      </p>
      </div><!-- End demo-description -->


      
    </div>

    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29418466-1']);
  _gaq.push(['_setDomainName', 'furf.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

    </body>
</html>
</apex:page>


Please can any one help me here?

Regards,
​Ajay
NagendraNagendra (Salesforce Developers) 
Hi Ajay,

Please check with below thread from stack overflow community which has multiple workarounds for Jquery sortable working on IOS devices. For additional information check here: Please mark this as solved if it's resolved.

Best Regards,
Nagendra.P