How do I implement jquery ui touch punch into my code?

Question

How do I implement jquery ui touch punch into my code?

3.1k Views Asked by denofdreamers At 22 January 2022 at 02:57

I'm still new to the realm of jquery but have a drag-and-drop code I'm looking to use on mobile devices as well. I've researched and it looks like I need to give Touch Punch a go, but I'm pretty unfamiliar with how to insert the coding in the correct places.

What do they mean by:

Include Touch Punch after jQuery UI and before its first use.

This is the Touch Punch code I'm looking to implement: https://github.com/furf/jquery-ui-touch-punch

Include Touch Punch after jQuery UI and before its first use.

Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

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

And this is the code I'm using on desktop and would like to work on mobile: http://pastie.org/p/4G0wdFm3f9nXfOZyPiKJSs

Thank you!

Original Q&A

There are 3 best solutions below

**onkar.am** · Answer 1 · 2022-01-22T03:30:58.263000

Include Touch Punch after jQuery UI and before its first use

--- This means that, you need to add <script src="jquery.ui.touch-punch.min.js"></script> after any JQuery UI script tag. Because touch-punch.min.js modify behaviour of jquery.ui.mouse.js ( May be some mouse events ) which may be already defined in any UI tags. Also add that script before user's first use so that browser will load all functions from your touch punch script.

As I can see in you code at http://pastie.org/p/4G0wdFm3f9nXfOZyPiKJSs, you don't really need to worry as you are not using any UI script. To make your code work, simply add <script src="jquery.ui.touch-punch.min.js"></script> after first two JQuery scripts tags in you code.

**Twisty** · Answer 2 · 2022-01-23T21:53:48.917000

As described, in your <head> you will want to define your scripts like so:

<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>

In this way each will be loaded in order, so jQuery is loaded first then TouchPunch. TouchPunch makes use of jQuery, this is why it is needed to load before.

See Example: https://jsfiddle.net/Twisty/kxw4caqh/6/ Mobile test: https://jsfiddle.net/Twisty/kxw4caqh/6/show

It is best practive to load libraries and script like this:

Styling
Scripts Libraries
Script
HTML

The page loads as it downloads and is rendered in order. So if jQuery needs to load before TouchPunch, it needs to be "above" the other. since the page executes from top down.

**Ususipse** · Answer 3 · 2022-03-28T09:48:42.127000

Wordpress' wp_enqueue_script was designed for dependency hurdles like this. Since jquery-sortable-ui already depends on jquery you only need to include it as a dependency per the docs. Here is an example that assumes you are making a child theme:

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

Add that to your functions.php file and enjoy.

How do I implement jquery ui touch punch into my code?

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in MOBILE

Related Questions in JQUERY-UI-TOUCH-PUNCH

Trending Questions

Popular # Hahtags

Popular Questions