CODEWITHSUNDEEP
jquerywordpressjquery-uimobilejquery-plugins
Mr. Jo
Mr. Jo

Reputation: 5261

jQuery UI with touchpunch not fully working on touch devices

I'm currently trying to get the jQuery UI sortable function working on my Android phone (touch). Sadly, the touch event don't works on my phone. I've tried everything.

jQuery("#details-inner").sortable({
    handle: ".sort-section-handle",
    axis: "y",
    placeholder: "sort-placeholder",
    update: function (e, r) {
        var a = {action: "update_element_position", sec: jQuery(r.item).attr("data-section"), pos: r.item.index()};
        jQuery.post(cm_ajaxurl, a)
    }
});

jQuery("#details-inner .sort-section-handle").disableSelection();

I've included jQuery UI and also jQuery UI Touch Punch for the mobile touch support within WordPress this way:

wp_enqueue_script( 'jquery-ui-sortable' );
wp_enqueue_script( 'jquery-touch-punch' );

On the computer everything works great but not on my phone. On the phone it's scrolling the page when I'm trying to press the handle to move the section. Any idea what could be the problem? Maybe the handle?

Upvotes: 1

Views: 1853

Answers (1)

Twisty
Twisty

Reputation: 30893

First, test with a working example without TouchPunch: https://jsfiddle.net/Twisty/jv4k2zmh/14/

For Android or mobile testing, use: https://jsfiddle.net/Twisty/jv4k2zmh/14/show

HMTL

<ul id="details-inner">
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 1</li>
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 2</li>
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 3</li>
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 4</li>
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 5</li>
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 6</li>
  <li class="ui-state-default"><span class="sort-section-handle ui-icon ui-icon-grip-dotted-vertical"></span>Item 7</li>
</ul>

CSS

#details-inner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 240px;
}

#details-inner li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  height: 1.5em;
  border-radius: 3px;
}

html>body #details-inner li {
  height: 1.5em;
  line-height: 1.2em;
}

.ui-state-highlight,
.sort-placeholder {
  height: 1.5em;
  line-height: 1.2em;
}

.sort-section-handle {
  margin: .2em;
}

Since we know we will be working with Mobile devices, I added a bit of a margin to the handle.

JavaScript

jQuery(function($) {
  $("#details-inner").sortable({
    handle: ".sort-section-handle",
    axis: "y",
    placeholder: "sort-placeholder"
  });

  $("#details-inner .sort-section-handle").disableSelection();
});

This works fine on a desktop yet does not work on Chrome on Android (my test device). So now we add TouchPunch.

https://jsfiddle.net/Twisty/jv4k2zmh/15/

Mobile: https://jsfiddle.net/Twisty/jv4k2zmh/15/show

This works as expected. I would advise loading TouchPunch after jQuery UI. You will want to check this in your WordPress resulting output.

Hope this helps.

Upvotes: 1

Related Questions