title: Jquery ui sortable hold and drag for mobile
body: <p>I have a jQuery UI sortable list. I am trying to make it work on mobile devices. I used the touch punch workaround. In order to scroll I have to deactivate the sortable function, I have done that and on taphold of a list element activate the sortable function. That is working ok, but the problem is that I want that while on taphold to allow the sorting of the element. Now it only works like this: taphold the element (taphold stops) and then I have to again tap it in order to sort.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;ul class="list-group" id="wrapper"&gt;
   &lt;li class="list-group-item"&gt;Block 1&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 2&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 3&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 4&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 5&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 6&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 7&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 8&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 9&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 10&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 11&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 12&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 13&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 14&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 15&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 16&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 17&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 18&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 19&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 20&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 21&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 22&lt;/li&gt;
   &lt;li class="list-group-item"&gt;Block 23&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code>$('#wrapper li').on('taphold', function(event, ui) {
      $( "#wrapper li" ).removeClass('selected');
      $( "#wrapper" ).sortable({disabled:false});
      $(this).addClass('selected');
  });
  
  $( "#wrapper" ).sortable({disabled:true,containment: "parent"});
  
  $( "#wrapper" ).on( "sortupdate", function( event, ui ) {
      $( "#wrapper" ).sortable({disabled:true});
  } );
  </code></pre>
  
  <p>Here is a jsfiddle(<a href="https://jsfiddle.net/3cygah12/" rel="noreferrer">https://jsfiddle.net/3cygah12/</a>) of the example.</p>
  
  <p>Anyone know how to solve this issue?</p>