1

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!

Twisty
  • 30,304
  • 2
  • 26
  • 45
denofdreamers
  • 63
  • 7

3 Answers3

3

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.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • Hmm, sorry this still isn't making sense to me! Are you able to specify exactly where the code needs to go? This is my code again - http://pastie.org/p/7koMlNrCtUzYFUpVrmUPCP – denofdreamers Jan 27 '22 at 03:48
  • @denofdreamers the issue is that you are loading your ` – Twisty Jan 27 '22 at 15:22
  • I implemented the initial code you shared, but the drag-and-drop feature went away. I'm looking for exact details on where to paste it in regards to my code because I'm so unfamiliar with the script layout. Totally understand if this doesn't make sense haha thanks! – denofdreamers Jan 27 '22 at 21:06
  • @denofdreamers updated the answer. – Twisty Jan 27 '22 at 22:39
  • For real, I can't thank you enough for this!!! This gives me so much opportunity for projects I have in mind. Thank you so very much (: – denofdreamers Jan 27 '22 at 22:47
  • Gonna throw something else out there in case you're able! Ideally, I want this drag & drop feature to be in sections. So you can open a section, drag out the item you want, then collapse it. This is what I have so far, but have 2 issues. First is the image of the rug is visible right away but I want it hidden the way text would be, until I click the expand button. 2nd is if someone wants to use the rug element for example, they drag it out and can close the 'rug' category WITHOUT it disappearing back into it. Hope this makes sense. http://pastie.org/p/6jeJLFOyne4wQbWtNhYF0f – denofdreamers Jan 28 '22 at 01:19
  • @denofdreamers I would suggest that if an answer has addressed your question, you mark it as the answer and upvote if you like. Then try working on your new issue. Do the research, try it out, and post a new question if needed. – Twisty Jan 28 '22 at 15:20
0

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.

onkaram
  • 560
  • 2
  • 7
  • would you be able to specify exactly where that code goes? I'm pasting it where I think it should go but nothing is working thus far. Here is my code again http://pastie.org/p/7koMlNrCtUzYFUpVrmUPCP Thank you!! – denofdreamers Jan 27 '22 at 03:47
0

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.

Ususipse
  • 303
  • 1
  • 9