如何在我的代碼中實現 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 文件中並享受。

如何在我的代碼中實現 jquery ui touch punch？

問題描述

3 個解決方案

解決方案1
0 2022-01-22 03:30:58

解決方案2
0 2022-01-23 21:53:48

解決方案3
0 2022-03-28 09:48:42

如何在我的代碼中實現 jquery ui touch punch？

問題描述

3 個解決方案

解決方案1 0 2022-01-22 03:30:58

解決方案2 0 2022-01-23 21:53:48

解決方案3 0 2022-03-28 09:48:42

解決方案1
0 2022-01-22 03:30:58

解決方案2
0 2022-01-23 21:53:48

解決方案3
0 2022-03-28 09:48:42