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

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

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

Thank you!

CodePudding user response：

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.

CodePudding user response：

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.