Question

我目前正在尝试让jQuery UI可排序功能在我的Android手机（触摸）上运行。遗憾的是，触摸事件在我的手机上不起作用。我已经尝试了一切。

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();

我通过以下方式在WordPress中为移动触摸支持提供了jQuery UI和jQuery UI Touch Punch：

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

在计算机上，一切正常，但在我的手机上却无法正常工作。在电话上，当我尝试按手柄移动该部分时，它正在滚动页面。知道可能是什么问题吗？也许是手柄？

Answer 1

首先，使用不带TouchPunch的有效示例进行测试：https://jsfiddle.net/Twisty/jv4k2zmh/14/

对于Android或移动设备测试，请使用：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;
}

由于我们知道我们将使用移动设备，因此我在手柄上增加了一些边距。

JavaScript

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

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

这在台式机上运行良好，但在Android（我的测试设备）上的Chrome上却无法运行。因此，现在我们添加TouchPunch。

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

手机：https://jsfiddle.net/Twisty/jv4k2zmh/15/show

这按预期工作。我建议在jQuery UI之后加载TouchPunch。您将需要在WordPress结果输出中进行检查。

希望这会有所帮助。

带有Touchpunch的jQuery UI在触摸设备上无法完全正常运行

1 个答案: