如何在我的代码中实现 jquery ui touch punch？

Question

我仍然是 jquery 的 realm 的新手，但我也希望在移动设备上使用拖放代码。 我已经研究过，看起来我需要给 Touch Punch 一个 go，但我非常不熟悉如何在正确的位置插入编码。

它们是什么意思：

在 jQuery UI 之后和首次使用之前包括 Touch Punch。

这是我要实现的 Touch Punch 代码： https://github.com/furf/jquery-ui-touch-punch

在 jQuery UI 之后和首次使用之前包括 Touch Punch。

请注意，如果您使用 jQuery UI 的组件，则必须在 jquery.ui.mouse.js 之后包含 Touch Punch，因为 Touch Punch 会修改其行为。

<script src="jquery.ui.touch-punch.min.js"></script>

这是我在桌面上使用并希望在移动设备上工作的代码： http://pastie.org/p/4G0wdFm3f9nXfOZyPiKJSs

谢谢！

Answer 1

在 jQuery UI 之后和首次使用之前包括 Touch Punch

--- 这意味着，您需要在任何 JQuery UI 脚本标签之后添加<script src="jquery.ui.touch-punch.min.js"></script> 。 因为 touch-punch.min.js 修改了 jquery.ui.mouse.js 的行为（可能是一些鼠标事件），可能已经在任何 UI 标签中定义。 还要在用户第一次使用之前添加该脚本，以便浏览器从您的触摸打孔脚本加载所有功能。

正如我在http://pastie.org/p/4G0wdFm3f9nXfOZyPiKJSs的代码中看到的那样，您不必担心，因为您没有使用任何 UI 脚本。 要使您的代码正常工作，只需在代码中的前两个 JQuery 脚本标签之后添加<script src="jquery.ui.touch-punch.min.js"></script> 。

Answer 2

如前所述，在您的<head>中，您需要像这样定义脚本：

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>$('#widget').draggable();</script>

这样每个都会按顺序加载，所以先加载 jQuery 然后再加载 TouchPunch。 TouchPunch 使用的是 jQuery，这就是为什么需要先加载。

Answer 3

Wordpress 的wp_enqueue_script是为这样的依赖障碍而设计的。 由于 jquery-sortable-ui 已经依赖于 jquery，您只需要根据文档将其作为依赖项包含在内。 这是一个假设您正在制作子主题的示例：

add_action( 'wp_enqueue_scripts', 'your_child_enqueue_scripts' );
function your_child_enqueue_scripts() {
    wp_enqueue_script('touch-punch', get_stylesheet_directory_uri().'/js/jquery.ui.touch-punch.min.js', ['jquery-ui-sortable'], null, true);
}

将其添加到您的 functions.php 文件中并享受。