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

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 结果输出中检查这一点。

希望这会有所帮助。