topic Just a note I wanted to add in Software Archive

jquery ui draggable

brian_a_1 — Tue, 14 Apr 2015 06:33:50 GMT

Hi,

does anyone have a recipe for including jquery ui, touch-punch etc into a project to get draggable available?

I tried, but I get a message in the design mode "loading..." that never goes away.

tia.

Well, you can add those

Chris_P_Intel — Tue, 14 Apr 2015 16:49:50 GMT

Well, you can add those things to your project, but you won't be able to test them in Design mode. It disables user scripts.

And, further, the Design mode already adds jquery UI for you to enable its own drag and drop. So, the double inclusion might be causing the problem you are seeing, I'm not sure. Also, if I recall correctly, jQuery Mobile is super sensitive to the order in which it is included, and jQuery UI may be similarly finicky.

If I were you, I'd first focus on getting everything working outside Design mode, and then worry about Design mode after. If you get the first step working, let us know and I can help consult about re-enabling the Design mode. And, with any luck, we can identify the exact problem and get a fix in for any future users who want to attempt the same.

Thanks for the reply Chris.

brian_a_1 — Wed, 15 Apr 2015 11:58:26 GMT

Thanks for the reply Chris.

"I'd first focus on getting everything working outside Design mode"

that should take me a year or so.. speak later :/

regards

Just a note I wanted to add

David_G_4 — Mon, 26 Oct 2015 16:28:21 GMT

Just a note I wanted to add on this issue:

If you try to include the jQuery UI library in the <head> tag of your index.html it will keep the Design mode of XDK from working (Some type of conflict)

But as a solution, just add it to the <body> instead. It allows Design mode to work and will work the same in your app.

Just wanted to pass on the info.

Example:

</body>

SithLord — Mon, 26 Oct 2015 17:28:06 GMT

I include draggable in the head without issue but i'm using "app_framework/2.2/af.ui.jquery.min.js"

<script type="application/javascript" src="lib/drag-ui.min.js"></script>
<script type="application/javascript" src="lib/jquery.ui.touch-punch.min.js"></script>