CODEWITHSUNDEEP
jqueryjquery-uimobilejquery-ui-touch-punch
denofdreamers
denofdreamers

Reputation: 61

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

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!

Upvotes: 1

Views: 4926

Answers (3)

Ususipse
Ususipse

Reputation: 321

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.

Upvotes: -1

Twisty
Twisty

Reputation: 30893

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.

Upvotes: 4

onkar.am
onkar.am

Reputation: 600

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.

Upvotes: 0

Related Questions